选择字段

选择字段和单选按钮比较相似，允许用户从多个选项中选择。但是，单选框的展示排版是由我们控制的，而<select>标签外观则是由浏览器控制。

选择字段也有一个更类似于复选框列表的变体，而不是单选框。 当赋予multiple属性时，<select>标签将允许用户选择任意数量的选项，而不仅仅是一个选项。 在大多数浏览器中，这会显示与正常的选择字段不同的效果，后者通常显示为下拉控件，仅在你打开它时才显示选项。

每一个<option>选项会有一个值，这个值可以通过value属性来定义。如果没有提供，选项内的文本将作为其值。<select>的value属性反映了当前的选中项。对于一个多选字段，这个属性用处不太大因为该属性只会给出一个选中项。

<select>字段的<option>标签可以通过一个类似于数组对象的options属性访问到。每个选项会有一个叫作selected的属性，来表明这个选项当前是否被选中。这个属性可以用来被设定选中或不选中。

这个例子会从多选字段中取出选中的数值，并使用这些数值构造一个二进制数字。按住CTRL（或 Mac 的COMMAND键）来选择多个选项。

  1. <select multiple>
  2.   <option value="1">0001</option>
  3.   <option value="2">0010</option>
  4.   <option value="4">0100</option>
  5.   <option value="8">1000</option>
  6. </select> = <span id="output">0</span>
  7. <script>
  8.   let select = document.querySelector("select");
  9.   let output = document.querySelector("#output");
  10.   select.addEventListener("change", () => {
  11.     let number = 0;
  12.     for (let option of Array.from(select.options)) {
  13.       if (option.selected) {
  14.         number += Number(option.value);
  15.       }
  16.     }
  17.     output.textContent = number;
  18.   });
  19. </script>