html中下拉选框的基本实现方式及JavaScript动态修改选项内容情况总结

最近项目中使用到了下拉选项以及通过js判断动态改变选项值的相关操作，查询了一些相关内容，在此记录一下，以免后续再碰到布置如何书写。

一、html中下拉选框的基本方式

在 HTML 中，创建下拉选择框（也叫选择菜单）通常使用 标签。这个标签包含多个 标签，每个 标签代表一个下拉选项。以下是一个简单的例子：

HTML：

<label for="fruit">选择一个水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

解释：

• <label for="fruit">选择一个水果：</label>：<label> 标签提供了一个用户友好的描述，它的for属性对应 <select> 元素的 id，即 id=“fruit”，这样可以增加可访问性。
• <select id="fruit" name="fruit">：<select> 标签表示下拉选择框，id 用于标识这个选择框，name 用于表单提交时识别这个选项。
• <option> 标签代表每个选项，value 属性指定该选项的值。value
  会在表单提交时传递给服务器，显示在下拉框中的文本就是用户看到的内容。

可选属性：

selected：指定默认选中的选项。

<option value="apple" selected>苹果</option>

disabled：禁用某个选项，使其无法被选中。
html

<option value="grape" disabled>葡萄（不可选）</option>

multiple：允许用户选择多个选项。

HTML：

<select id="fruits" name="fruits" multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

以上就是 HTML 中创建下拉选框的基本方式。

二、通过 JavaScript 动态修改下拉框

通过 JavaScript 动态修改下拉框（<select>）的选项非常简单，你可以使用 JavaScript 操作 DOM 来实现。下面是一些常见的操作，比如修改现有选项、添加新选项、删除选项等。

情景一： 修改下拉框中的选项

想要修改 <select> 中某个特定 <option> 的值或文本内容，可以使用 JavaScript 来完成。

HTML:

<label for="fruit">选择一个水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

<button onclick="changeOption()">修改选项</button>

JavaScript:

function changeOption() {
  // 获取下拉框元素
  var select = document.getElementById("fruit");
  
  // 修改第二个选项（value 为 "banana" 的选项）
  var option = select.options[1];  // 第二个选项，索引从 0 开始
  option.value = "blueberry";  // 修改值
  option.text = "蓝莓";  // 修改显示文本
}

情景二：动态添加选项

想要动态地向 <select> 中添加新的选项，可以使用 createElement 方法来创建新的 <option> 标签，并将其插入到 <select> 元素中。

HTML:

<label for="fruit">选择一个水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

<button onclick="addOption()">添加新的选项</button>

JavaScript:

function addOption() {
  // 获取下拉框元素
  var select = document.getElementById("fruit");

  // 创建一个新的 option 元素
  var newOption = document.createElement("option");
  newOption.value = "mango";  // 设置新选项的值
  newOption.text = "芒果";  // 设置新选项的显示文本

  // 将新选项添加到下拉框中
  select.appendChild(newOption);
}

情景三：删除选项

想要删除某个选项，可以使用 remove() 方法，或者直接通过索引删除。

HTML:

<label for="fruit">选择一个水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

<button onclick="removeOption()">删除第二个选项</button>

JavaScript:

function removeOption() {
  // 获取下拉框元素
  var select = document.getElementById("fruit");
  
  // 删除第二个选项（索引从 0 开始，所以删除的是 "banana"）
  select.remove(1);
}

情景四：修改默认选中的选项

想要在 JavaScript 中动态地修改下拉框的默认选中项，可以设置 selectedIndex 属性，或者通过修改某个选项的 selected 属性。

HTML:

<label for="fruit">选择一个水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

<button onclick="selectOption()">选择“葡萄”作为默认选项</button>

JavaScript:

function selectOption() {
  // 获取下拉框元素
  var select = document.getElementById("fruit");
  
  // 修改默认选中的选项（通过 value 属性）
  select.value = "grape";
}

总结：

1. 修改选项内容：通过获取 select 和其 options 集合，修改其中的某个选项的 value 或 text。
2. 添加新选项：使用 createElement 创建新的 <option> 元素，并将其加入到 select 元素中。
3. 删除选项：可以通过 remove() 或 removeChild() 删除特定的选项。
4. 修改默认选中项：使用 select.value 或 select.selectedIndex 来改变默认的选中项。