javascript基础学习系列三百零九：选项处理

对于只允许选择一项的选择框，获取选项最简单的方式是使用选择框的 selectedIndex 属性，如 下面的例子所示:

let selectedOption = selectbox.options[selectbox.selectedIndex];
  这样可以获取关于选项的所有信息，比如:
    let selectedIndex = selectbox.selectedIndex;
    let selectedOption = selectbox.options[selectedIndex];
    console.log(`Selected index: ${selectedIndex}\n` +
                `Selected text: ${selectedOption.text}\n` +
                `Selected value: ${selectedOption.value}`);

以上代码打印出了选中项的索引及其文本和值。
对于允许多选的选择框，selectedIndex 属性就像只允许选择一项一样。设置 selectedIndex
注意 不同浏览器返回的value属性可能会有差异。JavaScript中的value属性始终等于 HTML 中的 value 属性。但在 HTML 中没有指定 value 属性的情况下，IE8 及早期版本 会返回空字符串，而 IE9 及之后版本、Safari、Firefox、Chrome 和 Opera 会返回与 text 相同的值。

会移除所有选项，只选择指定的项，而获取 selectedIndex 只会返回选中的第一项的索引。 选项还可以通过取得选项的引用并将其 selected 属性设置为 true 来选中。例如，以下代码会选
中选择框中的第一项:

   selectbox.options[0].selected = true;

与 selectedIndex 不同，设置选项的 selected 属性不会在多选时移除其他选项，从而可以动态 选择任意多个选项。如果修改单选框中选项的 selected 属性，则其他选项会被移除。要注意的是，把 selected 属性设置为 false 对单选框没有影响。

通过 selected 属性可以确定选择框中哪个选项被选中。要取得所有选中项，需要循环选项集合逐 一检测 selected 属性，比如:

function getSelectedOptions(selectbox){
  let result = new Array();
  for (let option of selectbox.options) {
if (option.selected) { 19
      result.push(option);
    }
}
  return result;
}

这个函数会返回给定选择框中所有选中项的数组。首先创建一个包含结果的数组，然后通过 for 循 环迭代所有选项，检测每个选项的 selected 属性。如果选项被选中，就将其添加到 result 数组。最 后是返回选中项数组。这个 getSelectedOptions()函数可以用于获取选中项的信息，比如:

let selectbox = document.getElementById("selLocation");
let selectedOptions = getSelectedOptions(selectbox);
let message = "";
for (let option of selectedOptions) {
  message += 'Selected index: ${option.index}\n' +
             'Selected text: ${option.text}\n' +
             'Selected value: ${option.value}\n'
}
console.log(message);

这个例子先检索了一个选择框的所有选中项。然后通过 for 循环构建包含所有选中项信息的字符 串，包括每项的索引、文本和值。以上代码既适用于单选框也适用于多选框。
可以使用 JavaScript 动态创建选项并将它们添加到选择框。首先，可以使用 DOM 方法，如下所示: 26

添加选项

let newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

以上代码创建了一个新的元素，使用文本节点添加文本，设置其 value 属性，然后将添加到选择框。添加到选择框之后，新选项会立即显示出来。
另外，也可以使用 Option 构造函数创建新选项，这个构造函数是 DOM 出现之前就已经得到浏览
器支持的。Option 构造函数接收两个参数:text 和 value，其中 value 是可选的。虽然这个构造函 数通常会创建 Object 的实例，但 DOM 合规的浏览器都会返回一个元素。这意味着仍然可 以使用 appendChild()方法把这样创建的选项添加到选择框。比如下面的例子:

let newOption = new Option("Option text", "Option value"); selectbox.appendChild(newOption); // 在 IE8 及更低版本中有问题

这个方法在除 IE8 及更低版本之外的所有浏览器中都没有问题。由于实现问题，IE8 及更低版本在 这种情况下不能正确设置新选项的文本。
另一种添加新选项的方式是使用选择框的 add()方法。DOM 规定这个方法接收两个参数:要添加 的新选项和要添加到其前面的参考选项。如果想在列表末尾添加选项，那么第二个参数应该是 null。 IE8 及更早版本对 add()方法的实现稍有不同，其第二个参数是可选的，如果要传入则必须是一个索引 值，表示要在其前面添加新选项的选项。DOM 合规的浏览器要求必须传入第二个参数，因此在跨浏览 器方法中不能只使用一个参数(IE9 是符合 DOM 规范的)。此时，传入 undefined 作为第二个参数可 以保证在所有浏览器中都将选项添加到列表末尾。下面是一个例子:

let newOption = new Option("Option text", "Option value"); selectbox.add(newOption, undefined); // 最佳方案

以上代码可以在所有版本的 IE 及 DOM 合规的浏览器中使用。如果不想在最后插入新选项，则应该 使用 DOM 技术和 insertBefore()。