Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）

下面是Javascript select控件操作大全的完整攻略。

1. 新增选项

使用add方法新增选项，语法如下：

select.add(new Option(text,value),index); 

其中参数text为选项的文本内容，参数value为选项的值。如果value未定义，则默认与text相同。参数index为选项要插入的位置，如果未定义，则在最后插入。

下面是一个具体的示例：

<select id="mySelect"></select>

<script>
var select = document.getElementById("mySelect");

select.add(new Option("北京","bj"));
select.add(new Option("上海","sh"),1);
</script>

以上代码会向mySelect控件中添加两个选项，北京和上海，其中上海插入在北京之后。

2. 修改选项

使用options属性和innerHTML方法修改选项，语法如下：

select.options[index].innerHTML = "新文本内容";
select.options[index].value = "新值";

其中options属性返回一个数组，包含所有选项。innerHTML方法可以用于修改选项的文本内容。

下面是一个具体的示例：

<select id="mySelect">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

<script>
var select = document.getElementById("mySelect");

select.options[1].innerHTML = "深圳";
select.options[1].value = "sz";
</script>

以上代码将第二个选项的文本内容修改为“深圳”，值修改为“sz”。

3. 删除选项

使用remove方法删除选项，语法如下：

select.remove(index);

其中参数index为要删除的选项的下标。

下面是一个具体的示例：

<select id="mySelect">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="sz">深圳</option>
</select>

<button onclick="removeOption()">删除深圳</button>

<script>
var select = document.getElementById("mySelect");

function removeOption() {
  select.remove(2);
}
</script>

以上代码将控件中值为“深圳”的选项删除。

4. 选中选项

使用selectedIndex属性选中选项，语法如下：

select.selectedIndex = index;

其中参数index为要选中的选项的下标。

下面是一个具体的示例：

<select id="mySelect">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="sz">深圳</option>
</select>

<button onclick="selectOption()">选中上海</button>

<script>
var select = document.getElementById("mySelect");

function selectOption() {
  select.selectedIndex = 1;
}
</script>

以上代码将控件中第二个选项选中。

5. 清空选项

使用length属性和remove方法清空选项，语法如下：

select.length = 0;

以上代码将控件的选项数量设置为0，达到清空的效果。

下面是一个具体的示例：

<select id="mySelect">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="sz">深圳</option>
</select>

<button onclick="clearOptions()">清空选项</button>

<script>
var select = document.getElementById("mySelect");

function clearOptions() {
  select.length = 0;
}
</script>

以上代码将控件中的所有选项清空。

6. 判断选项是否存在

使用options属性和length属性判断选项是否存在，示例如下：

<select id="mySelect">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

<script>
var select = document.getElementById("mySelect");

if (select.options.length > 0) {
  console.log("控件中存在选项");
} else {
  console.log("控件中没有选项");
}
</script>

以上代码会输出“控件中存在选项”。如果控件中没有选项，将输出“控件中没有选项”。

以上就是Javascript select控件操作大全的完整攻略。