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";
}
总结：
- 修改选项内容：通过获取
select和其options集合，修改其中的某个选项的value或text。 - 添加新选项：使用
createElement创建新的<option>元素，并将其加入到select元素中。 - 删除选项：可以通过
remove()或removeChild()删除特定的选项。 - 修改默认选中项：使用
select.value或select.selectedIndex来改变默认的选中项。