js操作select控件的几种方法

关于js操作select控件的几种方法，我将为您提供一个完整的攻略。具体内容如下：

一、获取select控件

要想对select控件进行操作，首先我们需要获取到这个控件。获取select控件有两种方法：

1.1 通过ID获取

如果我们在html中给select控件定义了一个唯一的ID属性，那么我们就可以通过document.getElementById()方法获取这个控件。

var selectCtrl = document.getElementById("selectId");

这里的selectId是我们在html中给select控件定义的ID属性。

1.2 通过name属性获取

如果我们没有为select控件定义ID属性，可以通过select控件的name属性获取这个控件。这种方式获取的控件是一个控件数组，我们需要通过数组下标获取到我们需要的控件。

var selectCtrl = document.getElementsByName("selectName")[0];

这里的selectName是我们在html中给select控件定义的name属性，注意要使用[0]获取第一个控件。

二、获取选中项的值

获取到select控件之后，我们可以通过value属性获取当前选中项的值。

var selecedValue = selectCtrl.value;

三、设置选中项的值

我们可以通过value属性或者selectedIndex属性设置选中项的值。

3.1 通过value属性设置选中项的值

selectCtrl.value = "2";

这里将选中值设置为"2"。

3.2 通过selectedIndex属性设置选中项的值

selectCtrl.selectedIndex = 2;

这里将选中第3个选项。

四、动态添加选项

我们可以通过document.createElement()方法动态创建option节点，然后利用select控件的appendChild()方法将新节点添加进控件中。

var newOption = document.createElement("option");
newOption.innerText = "new option";
newOption.value = "newOption";

selectCtrl.appendChild(newOption);

这里我们创建了一个文本值为"new option"，值为"newOption"的新option节点，并将它添加到了select控件中。

五、动态删除选项

我们可以通过select控件的remove()方法动态移除一个option节点。

selectCtrl.remove(index);

其中index为某个option节点的索引值，通过这个方法可以动态删除某个选项。

示例1：获取select控件并改变其选中项

<select id="selectCtrl">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

var selectCtrl = document.getElementById("selectCtrl");

selectCtrl.value = "2";

这里我首先通过ID获取了一个select控件，然后通过value属性将第二个选项设置为了选中项。

示例2：动态添加并删除选项

<select id="selectCtrl">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

var selectCtrl = document.getElementById("selectCtrl");

var newOption = document.createElement("option");
newOption.innerText = "新选项";
newOption.value = "newOption";

selectCtrl.appendChild(newOption);

selectCtrl.remove(1);

这里我首先通过ID获取了一个select控件，然后动态创建了一个值为"newOption"文本为"新选项"的新选项节点，并将它添加到select控件中。最后我又通过remove()方法删除了原来的第二个选项节点。