JavaScript 知识量：26 - 101 - 483
选择框是一种表单元素，通常用于为用户提供多个选项，以便用户从多个选项中选择一个或多个选项。选择框有两种类型：单选框和复选框。
单选框：单选框是一种选择框，用户可以在多个选项中选择一个选项。通常，单选框用于在一组选项中选择一个选项，例如在问卷调查中选择最喜欢的颜色或最喜欢的食物等。单选框通常使用type属性进行定义，例如：<input type="radio" name="color" value="red">表示一个名为“color”的单选框，它的值为“red”。
复选框：复选框是一种选择框，用户可以在多个选项中选择多个选项。通常，复选框用于在一组选项中选择多个选项，例如在购物车中选择要购买的产品或选择要阅读的文章等。复选框通常使用type属性进行定义，例如：<input type="checkbox" name="product" value="book">表示一个名为“product”的复选框，它的值为“book”。
在Web页面中，选择框可以使用HTML的<input>标签进行定义，并使用name属性指定一个唯一的名称，以便在处理表单数据时识别每个选项。同时，使用value属性指定每个选项的值，以便在提交表单数据时将选项的值发送到服务器。
对于只允许选择一项的选择框，访问选中项的最简单方式确实是使用选择框的selectedIndex属性。这个属性返回的是被选中的选项的索引。
例如，假设有一个选择框，其id为"mySelectBox"，可以通过以下方式获取选中项的索引：
var selectedIndex = document.getElementById("mySelectBox").selectedIndex;要获取选中项的文本和值，可以如下操作：
var selectedOption = document.getElementById("mySelectBox").options[selectedIndex];
var selectedText = selectedOption.text;
var selectedValue = selectedOption.value;这样，就可以通过selectedIndex属性获取到选择框中被选中的选项的索引，然后通过该索引获取到选中项的文本和值。
可以使用 JavaScript 动态创建选项并将它们添加到选择框。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<body>
<select id="mySelect">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Pineapple">Pineapple</option>
<option value="Banana">Banana</option>
</select>
<p>点击按钮，添加新的选项到选择框。</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction() {
// 创建一个新的 <option> 元素
var x = document.createElement("option");
// 设置选项的文本和值
x.text = "Kiwi";
x.value = "Kiwi";
// 将新选项添加到选择框
document.getElementById("mySelect").add(x);
}
</script>
</body>
</html>在这个示例中，首先创建了一个包含四个选项的 select 元素。然后，定义了一个名为 myFunction 的函数，该函数创建一个新的 option 元素，设置其文本和值，然后将其添加到 select 元素中。最后，将这个函数绑定到一个按钮的点击事件上，这样当用户点击按钮时，新的选项就会被添加到选择框中。
移除HTML选择框中选项可以使用以下方法：
1. 使用DOM的removeChild()方法：
这种方法需要先获取到要移除的选项元素，然后调用该元素的removeChild()方法。例如，假设有一个ID为"mySelectBox"的选择框，想移除索引为2的选项，可以这样做：
var selectBox = document.getElementById("mySelectBox");
var optionToRemove = selectBox.options[2];
selectBox.removeChild(optionToRemove);2. 使用选择框的remove()方法：
这种方法可以直接在选择框上调用remove()方法，并传入要移除的选项的索引。例如，要移除上述选择框中索引为2的选项，可以这样做：
document.getElementById("mySelectBox").remove(2);3. 将选项设置为等于null：
这种方法不需要调用任何DOM方法，只需要将选项的value属性设置为null。这样，当下次提交表单时，这个null值就会被忽略。例如，要移除上述选择框中value为"Pineapple"的选项，可以这样做：
document.getElementById("mySelectBox").options[3].value = null;注意：这种方法并不会真正地从DOM中移除选项，只是让它在提交表单时被忽略。如果希望从DOM中彻底移除选项，应该使用前两种方法之一。
DOM 的 appendChild() 方法可以用于将一个元素从一个位置移动到另一个位置。这个方法被用于将一个节点附加到指定父节点的子节点列表的末尾。如果目标位置已经有元素，那么这个元素会被新的元素替换。
以下是一个简单的示例，演示如何将第一个选择框（id 为 "select1"）中的第一个选项移动到第二个选择框（id 为 "select2"）中：
var select1 = document.getElementById("select1");
var optionToMove = select1.options[0];
var select2 = document.getElementById("select2");
select2.appendChild(optionToMove);在这个例子中，首先获取了两个选择框元素。然后，从第一个选择框中获取了要移动的选项。最后，使用 appendChild() 方法将这个选项移动到第二个选择框中。
这种方法不仅可以用于选择框，也可以用于任何其他类型的 DOM 元素，只要它们有父元素和子元素关系。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6