js 操作select和option常用代码整理

在JavaScript中，操作``和``元素是常见的需求，用于处理表单选择框。以下是一些常用的代码片段，涵盖了添加、删除、选中``元素，以及获取选中值等操作。

### 1. 获取`

`元素

首先，你需要通过某种方式（如`document.getElementById`或`document.querySelector`）获取到``元素。

var selectElement = document.getElementById('mySelect');
// 或者
var selectElement = document.querySelector('select[name="mySelect"]');

### 2. 添加`

`元素

向`

`中添加新的``元素。

var newOption = new Option('新选项', 'value1');
selectElement.add(newOption);

// 或者使用appendChild
var newOption2 = document.createElement('option');
newOption2.value = 'value2';
newOption2.text = '另一个新选项';
selectElement.appendChild(newOption2);

### 3. 删除``元素

从``中删除指定的``元素。

// 根据索引删除
selectElement.remove(0); // 删除第一个选项

// 根据值或文本删除
for (var i = selectElement.options.length - 1; i >= 0; i--) {
    if (selectElement.options[i].value === 'valueToDelete') {
        selectElement.remove(i);
    }
}

### 4. 选中`

`元素

设置`

`元素的选中项。

// 通过索引
selectElement.selectedIndex = 1; // 选中第二个选项

// 通过值
for (var i = 0; i < selectElement.options.length; i++) {
    if (selectElement.options[i].value === 'valueToSelect') {
        selectElement.selectedIndex = i;
        break;
    }
}

// 也可以通过直接设置value属性（如果select是单选）
selectElement.value = 'valueToSelect';

### 5. 获取选中``的值和文本

获取当前选中的``的值或显示的文本。

// 获取值
var selectedValue = selectElement.value;

// 获取文本
var selectedText = selectElement.options[selectElement.selectedIndex].text;

// 或者更简洁的方式（如果只需要文本）
var selectedText = selectElement.options[selectElement.selectedIndex].innerHTML;

以上就是在JavaScript中操作``和``元素的一些常用代码示例。希望这对你有所帮助！

---