一、选择框属性和方法

1. 选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。

• 以下面的选择框为例：
  

2. 在 DOM 中，每个<option>元素都有一个 HTMLOptionElement 对象表示。为便于访问数据， HTMLOptionElement 对象添加了下列属性：
   
   虽然也可以使用常规的 DOM 功能来访问这些信息，但效率是比较低的，如下面的例子所示:

• 最后，我们还想提醒读者注意一点：选择框的 change 事件与其他表单字段的 change 事件触发的条件不一样。其他表单字段的 change 事件是在值被修改且焦点离开当前字段时触发，而选择框的 change 事件只要选中了选项就会触发。

不同浏览器下，选项的 value 属性返回什么值也存在差别。但是，在所有浏览 器中，value 属性始终等于 value 特性。在未指定 value 特性的情况下，IE8 会返回空字符串，而 IE9+、Safari、Firefox、Chrome 和 Opera 则会返回与 text 特性相同的值。

二、选择选项

1. 对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属性，如下面的例子所示：
   
2. 对于可以选择多项的选择框，selectedfIndex 属性就好像只允许选择一项一样。设置 selectedIndex 会导致取消以前的所有选项并选择指定的那一项，而读取 selectedIndex 则只会返回选中项中第一项的索引值。
3. 另一种选择选项的方式，就是取得对某一项的引用，然后将其 selected 属性设置为 true。例如， 下面的代码会选中选择框中的第一项：
   

• 与 selectedIndex 不同，在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项的选择，因而可以动态选中任意多个项。但是，如果是在单选选择框中，修改某个选项的 selected 属性则会取消对其他选项的选择。
• 实际上，selected 属性的作用主要是确定用户选择了选择框中的哪一项【单选框的话用selectIndex更方便】。要取得所有选中的项， 可以循环遍历选项集合，然后测试每个选项的 selected 属性。来看下面的例子。
  

三、添加选项

1. 方法一：可以使用 JavaScript 动态创建选项，并将它们添加到选择框中。添加选项的方式有很多，第一种方 式就是使用如下所示的 DOM 方法。
   
2. 方法二：是使用 Option 构造函数来创建新选项，这个构造函数是 DOM 出现之前就有的，一 直遗留到现在。

• Option 构造函数接受两个参数：文本(text)和值(value);第二个参数可选。 虽然这个构造函数会创建一个 Object 的实例，但兼容 DOM 的浏览器会返回一个<option>元素。 换句话说，在这种情况下，我们仍然可以使用 appendChild()将新选项添加到选择框中。来看下面 的例子。
  
  这种方式在除 IE 之外的浏览器中都可以使用。由于存在 bug，IE 在这种方式下不能正确设置新选项的文本。

3. 方法三：是使用选择框的 add()方法。

• DOM 规定这个方法接受两个参数：要添加的新选项和将位于新选项之后的选项。

• 如果想在列表的最后添加一个选项，应该将第二个参数设置为 null。

  在 IE 对 add()方法的实现中，第二个参数是可选的，而且如果指定，该参数必须是新选项之后选项的索引。

  兼容 DOM 的浏览器要求必须指定第二个参数，因此要想编写跨浏览器的代码，就不能只传入一个参数。这时候，为第二个参数传入 undefined，就可以在所有浏览器中都将新选项插入到列表最后了。来看一个例子。
  
  在 IE 和兼容 DOM 的浏览器中，上面的代码都可以正常使用。如果你想将新选项添加到其他位置(不是最后一个)，就应该使用标准的 DOM 技术和 insertBefore()方法。【add（）不可以吗？】

四、移除选项

1. 方法一：与添加选项类似，移除选项的方式也有很多种。首先，可以使用 DOM 的 removeChild()方法，为其传入要移除的选项，如下面的例子所示:
   
2. 其次，可以使用选择框的 remove()方法。这个方法接受一个参数，即要移除选项的索引，如下面的例子所示：
   
3. 最后一种方式，就是将相应选项设置为 null。这种方式也是 DOM 出现之前浏览器的遗留机制。
   例如:
   
4. 要清除选择框中所有的项，需要迭代所有选项并逐个移除它们，如下面的例子所示:
   
   这个函数每次只移除选择框中的第一个选项。由于移除第一个选项后，所有后续选项都会自动向上 移动一个位置，因此重复移除第一个选项就可以移除所有选项了。

五、移动和重排选项

1. 使用 DOM 的 appendChild()方法，就可以将第一个选择框中的选项直接移动到第二个选择框中。

• 我们知道，如果为 appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置。下面的代码展示了将第一个选择框中的第一个选项移动到 第二个选择框中的过程。
• 
  移动选项与移除选项有一个共同之处，即会重置每一个选项的 index 属性。

2. 重排选项次序的过程也十分类似，最好的方式仍然是使用 DOM 方法。要将选择框中的某一项移动到特定位置，最合适的 DOM 方法就是 insertBefore()；appendChild()方法只适用于将选项添加到选择框的最后。要在选择框中向前移动一个选项的位置，可以使用以下代码：
   
   以上代码首先选择了要移动的选项，然后将其插入到了排在它前面的选项之前。

• 实际上，第二行代码对除第一个选项之外的其他选项是通用的。类似地，可以使用下列代码将选择框中的选项向后移动一 个位置。
  

IE7 存在一个页面重绘问题，有时候会导致使用 DOM 方法重排的选项不能马上 正确显示。