# jQuery 操作下拉框 select（设置默认选中，清空选中状态）

**URL:** <https://www.shiqidu.com/t/topic/652>\
**Category:** 开发调优\
**Tags:** jQuery\
**Created:** [2019 年10 月 9 日 08:09 UTC](https://www.shiqidu.com/t/topic/652 "2019-10-09T08:09:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![blue91a4](https://www.shiqidu.com/user_avatar/www.shiqidu.com/blue91a4/32/518_2.png) [@blue91a4](https://www.shiqidu.com/u/blue91a4)\
发布日期： [2019 年10 月 9 日 08:09 UTC](https://www.shiqidu.com/t/topic/652/1 "2019-10-09T08:09:59Z")

</div>

### 取值

```js
<select id="selector">
		<option value="1">选项一</option>
		<option value="2">选项二</option>
		<option value="3">选项三</option>
		<option value="4">选项四</option>
</select>

```

#### 1. 获取当前选中项的text和value

```js
$("#selector").find("option:selected").text();
$("#selector").find("option:selected").val();

```

#### 2. 获取当前选中的索引值（从0开始）

```js
$("#selector").get(0).selectedIndex;

```

#### 获取第一项（最小）和最后一项（最大）的text

```js
$("#selector option:last").text();
$("#selector option:first").text();

```

### 更改和设置选中状态

#### 1. 改变select的选中，执行该语句后将第0个改为被选中状态，这里eq(i)，i为索引值

```js
$("#selector").each(function(){
		$(this).find("option").eq(0).prop("selected",true)
});

```

#### 2. 为select添加事件，当选择其中一项时触发事件

```js
$('#selector').change(function (e) {
	 alert(1243);
});

```

#### 3. 设置select索引值为1的项选中

```js
$("#selector").get(0).selectedIndex = 1;

```

#### 4. 设置select的value值为’1’的项选中

```js
$("#selector option[value='1']").prop("selected", true);

```

### 添加/删除select的option项：

#### 1. 为select追加一个option(下拉项)，在末尾添加

```js
$("#selector").append("<option value='5'>选项五</option>");

```

#### 2. 为select追加一个option(下拉项)，在起始添加

```js
$("#selector").prepend("<option value='5'>选项五</option>");

```

#### 3. 删除select中最后一个option

```js
$("#selector option:last").remove();

```

#### 4. 删除select中value='3’的option

```js
$("#selector option[value='3']").remove();

```

> 原文 [https://blog.csdn.net/m\_Tenderness/article/details/91898841](https://blog.csdn.net/m_Tenderness/article/details/91898841)