选择框编程.md

选择框编程

<label for="sel">国家</label>
<select name="sel" id="sel" size=2>
  <option value="china">china</option>
  <option value="Amrican">Amrican</option>
  <option value="Japan">Japan</option>
</select>

选择框使用 <select> 和 <option> 元素创建。HTMLSelectElement 类型在除了所有表单字段的属性之外还添加了以下属性

• add(newOption,relOption)：在 relOption 之前向控件添加新的 <option>

  //在第一个option之前增加一个option
  let opt = document.createElement('option')
  opt.value = 'Korea'
  opt.innerText = 'Korea'
  sel.add(opt, sel.options[0])

• remove(index)：移除指定位置的选项

  sel.remove(1)

• multiple：布尔值,表示是否多选.HTML-->multiple

• options：空间中所有 <option> 的 HTMLCollection

• selectedionIndex：选中项基于 0 的索引值。如果没有选中项则为 -1。对于多选列表，始终是第一个选项的索引

• size：选择框可见的行数。等价于 HTML-->size

• labels：只读属性返回与 <select> 元素关联的 <label> 元素的 NodeList

  console.log(sel.labels[0])
  //<label for="sel">国家</label>

每个 <option> 元素在 DOM 中都由一个 HTMLOptionElement 对象表示

• index：选项在 options 集合中的索引

• label：选项的标签，等价于 HTML 的 label 属性。返回一个字符串，该 option 的文本内容

  console.log(sel.options[0].label)
  //Korea

• selected：布尔值，表示是否选中当前选项。true 表示选中

  sel.options[2].selected = true//Japan
  console.log(sel.selectedIndex)//2

• text：选项的文本。和 innerText 等价

• value：选项的值。等价于 HTML 的 value

在 select 中的 change 事件与其他表单不一样，选择框会在选中一项时立即触发表单

选项处理

只选择一项的情况下，获取选项的方式使用选择框的 selectedIndex 属性

sel.addEventListener("blur", (e) => {
  console.log(sel.options[sel.selectedIndex])
})

如果是多选框，selectedIndex 属性只会选中第一个 option。但是可以使用 selected 属性对多选逐一检测

function selectionOpt(e) {
  const res = []
  for (let options of sel.options) {
    if (options.selected) res.push(options)
  }
  console.log(res)
}
sel.addEventListener("blur", selectionOpt)

添加选项

如果使用 JavaScript 动态的创建会很繁琐

let newOption = document.createElement("option")
newOption.appendChild(document.createTextNode("new option"))
newoption.setAttribute("value","value option")
sel.appendChild(newOption)

使用 Option 构造函数，可以接受四个参数

1. text：文本信息，即 createTextNode
2. value：向服务端传入的值
3. defaultSelected：默认值 false。默认的选中状态
4. selected：选中状态

const opt = new Option("English", "English", false, false)
sel.appendChild(opt)

移除选项

1. 使用 removeChild

   sel.removeChild(sel.options[0])

2. 使用选择框的 remove() 方法

   sel.remove(0)

3. 将 options 设置为 null

   sel.options[0] = null

移动和重排

let moveOpt = sel.options[0]
sel.insertBefore(moveOpt, sel.options[2])