选择框是通过和元素创建的。为了方便与这个控件交互，除了所有表单字段共 有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。
add(newOption, relOption)：向控件中插入新元素，其位置在相关项（relOption） 之前。
multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
options：控件中所有元素的 HTMLCollection。
remove(index)：移除给定位置的选项。
selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件， 只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于 HTML 中的 size 特性。
选择框的 type 属性不是"select-one"，就是"select-multiple"，这取决于 HTML 代码中有 没有 multiple 特性。选择框的 value 属性由当前选中项决定，相应规则如下。
如果没有选中的项，则选择框的 value 属性保存空字符串。
如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等 于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该 项的文本。
如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。
在 DOM 中，每个元素都有一个 HTMLOptionElement 对象表示。为便于访问数据， HTMLOptionElement 对象添加了下列属性：
index：当前选项在 options 集合中的索引。
label：当前选项的标签；等价于 HTML 中的 label 特性。
selected：布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
text：选项的文本。
value：选项的值（等价于 HTML 中的 value 特性）。
其中大部分属性的目的，都是为了方便对选项数据的访问。
//推荐
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
选择选项
对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属 性，如下面的例子所示：
var selectedOption = selectbox.options[selectbox.selectedIndex];
对于可以选择多项的选择框， selectedfIndex 属性就好像只允许选择一项一样。 设置 selectedIndex 会导致取消以前的所有选项并选择指定的那一项，而读取 selectedIndex 则只会返 回选中项中第一项的索引值。
另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true。例如， 下面的代码会选中选择框中的第一项：
selectbox.options[0].selected = true;
与 selectedIndex 不同，在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项 的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则 会取消对其他选项的选择。需要注意的是，将 selected 属性设置为 false 对单选选择框没有影响。
实际上，selected 属性的作用主要是确定用户选择了选择框中的哪一项。要取得所有选中的项， 可以循环遍历选项集合，然后测试每个选项的 selected 属性。
function getSelectedOptions(selectbox){
var result = new Array();
var option = null;
for (var i=0, len=selectbox.options.length; i < len; i++){
option = selectbox.options[i];
if (option.selected){
result.push(option);
}
}
return result;
}
添加选项
可以使用 JavaScript 动态创建选项，并将它们添加到选择框中。添加选项的方式有很多，第一种方 式就是使用如下所示的 DOM 方法。
var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);
第二种方式是使用 Option 构造函数来创建新选项，这个构造函数是 DOM 出现之前就有的，一 直遗留到现在。 Option 构造函数接受两个参数：文本（ text ）和值（ value ）；第二个参数可选。
var newOption = new Option("Option text", "Option value"); selectbox.appendChild(newOption); //在 IE8 及之前版本中有问题
第三种添加新选项的方式是使用选择框的 add()方法。DOM 规定这个方法接受两个参数：要添加 的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项，应该将第二个参数设置为 null。在 IE 对 add()方法的实现中，第二个参数是可选的，而且如果指定，该参数必须是新选项之后 选项的索引。兼容 DOM 的浏览器要求必须指定第二个参数，因此要想编写跨浏览器的代码，就不能只 传入一个参数。这时候，为第二个参数传入 undefined，就可以在所有浏览器中都将新选项插入到列 表最后了。
var newOption = new Option("Option text", "Option value"); selectbox.add(newOption, undefined); //最佳方案
移除选项
与添加选项类似，移除选项的方式也有很多种。首先，可以使用 DOM 的 removeChild()方法， 为其传入要移除的选项。
selectbox.removeChild(selectbox.options[0]);
其次，可以使用选择框的 remove()方法。这个方法接受一个参数，即要移除选项的索引，如下面 的例子所示：
selectbox.remove(0); //移除第一个选项
最后一种方式，就是将相应选项设置为 null。这种方式也是 DOM 出现之前浏览器的遗留机制。
selectbox.options[0] = null; //移除第一个选项
要清除选择框中所有的项，需要迭代所有选项并逐个移除它们，
function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){ selectbox.remove(i);
}
}
.markdown-body pre,.markdown-body pre>code.hljs{color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
