html中下拉选框的基本实现方式及JavaScript动态修改选项内容情况总结
最近项目中使用到了下拉选项以及通过js判断动态改变选项值的相关操作，查询了一些相关内容，在此记录一下，以免后续再碰到布置如何书写。
一、html中下拉选框的基本方式
在 HTML 中，创建下拉选择框（也叫选择菜单）通常使用 标签。这个标签包含多个 标签，每个 标签代表一个下拉选项。以下是一个简单的例子：
HTML：
解释：
：
会在表单提交时传递给服务器，显示在下拉框中的文本就是用户看到的内容。
可选属性：
selected：指定默认选中的选项。
disabled：禁用某个选项，使其无法被选中。
html
multiple：允许用户选择多个选项。
HTML：
以上就是 HTML 中创建下拉选框的基本方式。
二、通过 JavaScript 动态修改下拉框
通过 JavaScript 动态修改下拉框（
情景一： 修改下拉框中的选项
想要修改
HTML:
JavaScript:
function changeOption() {
// 获取下拉框元素
var select = document.getElementById("fruit");
// 修改第二个选项（value 为 "banana" 的选项）
var option = select.options[1]; // 第二个选项，索引从 0 开始
option.value = "blueberry"; // 修改值
option.text = "蓝莓"; // 修改显示文本
}
情景二：动态添加选项
想要动态地向
HTML:
JavaScript:
function addOption() {
// 获取下拉框元素
var select = document.getElementById("fruit");
// 创建一个新的 option 元素
var newOption = document.createElement("option");
newOption.value = "mango"; // 设置新选项的值
newOption.text = "芒果"; // 设置新选项的显示文本
// 将新选项添加到下拉框中
select.appendChild(newOption);
}
情景三：删除选项
想要删除某个选项，可以使用 remove() 方法，或者直接通过索引删除。
HTML:
JavaScript:
function removeOption() {
// 获取下拉框元素
var select = document.getElementById("fruit");
// 删除第二个选项（索引从 0 开始，所以删除的是 "banana"）
select.remove(1);
}
情景四：修改默认选中的选项
想要在 JavaScript 中动态地修改下拉框的默认选中项，可以设置 selectedIndex 属性，或者通过修改某个选项的 selected 属性。
HTML:
JavaScript:
function selectOption() {
// 获取下拉框元素
var select = document.getElementById("fruit");
// 修改默认选中的选项（通过 value 属性）
select.value = "grape";
}
总结：
修改选项内容：通过获取 select 和其 options 集合，修改其中的某个选项的 value 或 text。添加新选项：使用 createElement 创建新的