1、获取单选选择框的选中项
//1. 获取选中项的索引
let selectedIndex = selectBox.selectedIndex;
//2.获取选中项
let selectedOption = selectBox.options[selectedIndex];
//3.输出选中项的索引、文本和值
console.log(`选中项的索引:${selectedIndex}`);
console.log(`选中项的文本:${selectedOption.text}`);
console.log(`选中项的值:${selectedOption.value}`);
2. 获取多选选择框的选中项
不同于单选,selectedIndex
这个属性一旦在多选选择框中设置,那么即使已经选择了好几个选项,也会变成只有这个索引对应的选项被选中。
而selected
这个属性就不会发生这样的情况:
selectBox.options[0].selected = true;
把第一个选项选中,并不会影响其他选项的选择状态,因此,若要获得多选选择框的选中项,就要循环选项判断selected
是否为true
。
function getSelectedOptions(selectbox){
let result = [];
for(let option of selectbox.options){
if(option.selected){
result.push(option);
}
}
}