javascript基础从小白到高手系列六百六十四：选项处理

对于只允许选择一项的选择框，获取选项最简单的方式是使用选择框的selectedIndex 属性，如
下面的例子所示：
let selectedOption = selectbox.options[selectbox.selectedIndex];
这样可以获取关于选项的所有信息，比如：
let selectedIndex = selectbox.selectedIndex;
let selectedOption = selectbox.options[selectedIndex];
console.log(Selected index: ${selectedIndex}\n +
Selected text: ${selectedOption.text}\n +
Selected value: ${selectedOption.value});
以上代码打印出了选中项的索引及其文本和值。
对于允许多选的选择框，selectedIndex 属性就像只允许选择一项一样。设置selectedIndex会移除所有选项，只选择指定的项，而获取selectedIndex 只会返回选中的第一项的索引。
选项还可以通过取得选项的引用并将其selected 属性设置为true 来选中。例如，以下代码会选
中选择框中的第一项：
selectbox.options[0].selected = true;
与selectedIndex 不同，设置选项的selected 属性不会在多选时移除其他选项，从而可以动态
选择任意多个选项。如果修改单选框中选项的selected 属性，则其他选项会被移除。要注意的是，把
selected 属性设置为false 对单选框没有影响。
通过selected 属性可以确定选择框中哪个选项被选中。要取得所有选中项，需要循环选项集合逐
一检测selected 属性，比如：
function getSelectedOptions(selectbox){
let result = new Array();
for (let option of selectbox.options) {
if (option.selected) {
result.push(option);
}
}
return result;
}
这个函数会返回给定选择框中所有选中项的数组。首先创建一个包含结果的数组，然后通过for 循
环迭代所有选项，检测每个选项的selected 属性。如果选项被选中，就将其添加到result 数组。最
后是返回选中项数组。这个getSelectedOptions()函数可以用于获取选中项的信息，比如：
let selectbox = document.getElementById(“selLocation”);
let selectedOptions = getSelectedOptions(selectbox);
let message = “”;
for (let option of selectedOptions) {
message += ‘Selected index: ${option.index}\n’ +
‘Selected text: ${option.text}\n’ +
‘Selected value: ${option.value}\n’
}
console.log(message);
这个例子先检索了一个选择框的所有选中项。然后通过for 循环构建包含所有选中项信息的字符
串，包括每项的索引、文本和值。以上代码既适用于单选框也适用于多选框。