2024年4月16日发(作者：)
jquery操作select下拉框的多种方法（选中取值赋值
等）精品
jQuery是一个非常强大的JavaScript库，它提供了很多方便的方法
来操作HTML元素，包括select下拉框。下面我将介绍几种常用的方法来
操作select下拉框，包括选中选项、取值和赋值等。
1.选中选项
使用jQuery可以很方便地选中select下拉框的选项。下面是几种常
用的方法：
- 使用`val(`方法选中指定值的选项：
```javascript
$("#select").val("option-value");
```
其中`#select`是select元素的ID，`option-value`是需要选中的
选项的值。
- 使用`prop(`方法根据选项的值或文本选中选项：
```javascript
$("#select option[value='option-value']").prop("selected",
true);
$("#select option:contains('option-text')").prop("selected",
true);
```
这两种方法都是根据选项的值或文本来选中选项。第一种方法中
`option-value`是需要选中的选项的值，第二种方法中`option-text`是
需要选中的选项的文本。
- 使用`attr(`方法根据选项的值或文本选中选项：
```javascript
$("#select option[value='option-value']").attr("selected",
"selected");
$("#select option:contains('option-text')").attr("selected",
"selected");
```
这两种方法和前面的方法类似，只是使用的是`attr(`方法来设置
`selected`属性。
2.取值
使用jQuery可以很方便地获取select下拉框当前选中的值。下面是
几种常用的方法：
- 使用`val(`方法获取当前选中的值：
```javascript
var selectedValue = $("#select").val(;
```
其中`#select`是select元素的ID，`selectedValue`是获取到的当
前选中的值。
- 使用`prop(`方法获取当前选中的值：
```javascript
var selectedValue = $("#select
option:selected").prop("value");
```
这种方法中，首先使用`option:selected`选择器选中当前选中的选
项，然后使用`prop("value")`方法获取其值。
3.赋值
使用jQuery可以很方便地设置select下拉框的选中值。下面是几种
常用的方法：
- 使用`val(`方法设置选中的值：
```javascript
$("#select").val("option-value");
```
其中`#select`是select元素的ID，`option-value`是需要设置为
选中的值。
- 使用`prop(`方法根据选项的值或文本设置选中的值：
```javascript
$("#select option[value='option-value']").prop("selected",
true);
$("#select option:contains('option-text')").prop("selected",
true);
```
这两种方法和前面的选中方法类似，只是使用的是`prop("selected",
true)`来设置选中。
- 使用`attr(`方法根据选项的值或文本设置选中的值：
```javascript
$("#select option[value='option-value']").attr("selected",
"selected");
$("#select option:contains('option-text')").attr("selected",
"selected");
```
这两种方法和前面的选中方法类似，只是使用的是`attr("selected",
"selected")`来设置选中。
发布评论