jquery操作select(取值，设置选中）

封面图 • 2025-10-06 • jQuery

在 jQuery 中，操作 `<select>` 元素（下拉框）非常常见，包括**获取选中的值**、**设置某个选项为选中状态**等。以下是常用的操作方法：

---

## 一、获取选中的值

### 1. 获取当前选中的 `option` 的 **value**

```javascript
var selectedValue = $("#yourSelectId").val();
console.log(selectedValue);
```

### 2. 获取当前选中的 `option` 的 **text**

```javascript
var selectedText = $("#yourSelectId option:selected").text();
console.log(selectedText);
```

---

## 二、设置选中状态

### 1. 设置某个 `option` 为选中（根据 `value`）

```javascript
$("#yourSelectId").val("optionValue");
```

> 这会将 `value="optionValue"` 的选项设为选中。

### 2. 设置某个 `option` 为选中（根据 `index`）

```javascript
$("#yourSelectId").prop("selectedIndex", 1); // 从0开始计数
```

### 3. 手动设置某个 `option` 为选中（通过选择器）

```javascript
$("#yourSelectId option[value='optionValue']").prop("selected", true);
```

---

## 三、示例 HTML

```html
<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>
```

---

## 四、完整示例

```html
<!DOCTYPE html>
<html>
<head>
    <title>jQuery Select Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button onclick="getSelected()">获取选中值</button>
<button onclick="setSelected()">设置选中</button>

function setSelected() {
    $("#mySelect").val("2"); // 设置选项2为选中
}
</script>

</body>
</html>
```

---

如果你有更复杂的需求（比如动态生成 `<select>` 或多选），也可以告诉我，我可以提供更详细的解决方案。