选择框编程

HTMLSelectElement

属性或方法	说明
add(newOption, relOption)	在 relOption 之前向控件添加新的 option
multiple	布尔值，表示是否允许多选
options	控件中所有 option 元素的 HTMLCollection
remove(index)	移除给定位置的选项
selectedIndex	选中项基于 0 的索引值，如果没选中则为 -1 对于多选，始终是一个选项的索引
size	选择框中可见的行数
value	选中项的 value，如果为多选，则第一个选中项的 value

HTMLOptionElement

属性	说明
index	选项在 options 集合中的索引
label	选项的标签，等价于 HTML 的 label 属性
selected	布尔值，表示是否选中了当前选项。把此属性设置为 true 会选中此项
text	选中的文本
value	选中的值

value 的情况

<select id='checked' multiple>
    <option value="a">1</option>
    <option value="">2</option>
    <option>3</option>
</select>

1. 选中第一个，则值为 a
2. 选中第二个，则值为空字符串
3. 选中第三个，则值为 3

选项处理

1. 对于单选，获取 selectedIndex 即可

   const selectedOption = selectbox.options[selectbox.selectedIndex]

2. 对于多选，需要循环获取

   function getSelectedOptions(selectbox) {
       const result = []
       for (const option of selectbox.opstions) {
           if (option.selected) {
               result.push(option)
           }
       }
       return result
   }

添加选项

1. 创建新的选项

• DOM 创建

  const newOption = document.createElement('option')
  newOption.text = 'new text'
  newOption.value = 'new value'

• 通过构造函数

  const newOption = new Option('new text', 'new value')

2. 添加进 selectbox 中

• selectbox.appendChild(newOption)

• // 添加至末尾时，第二个参数传 undefined，兼容性最好
  selectbox.add(newOption, undefined)

移除选项

• selectbox.removeChild(selectbox.options[0])

• selectbox.remove(0)

• selectbox.options[0] = null