js 设置 select 选择值与获取所有选项的两种情况

select 下拉列表框一般由用户选择，但有时候需要用 javascript 来选择，例如复原用户选择的项时。在大多情况下，通常在后台复原用户所选择的项，但为了节省服务器资源，有时也在客户端用 js 来复原。

除用 js 来复原用户的选择值外，有时还要获取 select 的所有选项，根据需求不同，可能从所有选项中查找某个值，也可能把所有选项暂时保存到客户端，以便用户单击某个应用的按钮复原丢失的 select 选项。

一、js 设置 select 选择值

1、用选择项值设置

用 javascript 设置 select 选择值的方法跟后台设置完全一样，html 代码如下：

<select id="selecteId">
    <option value="0">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>

javascript 代码：

var selId = document.getElementById("selecteId");
  selId.value = "2";//把 select 的选择项设置为2，即选项2

2、用选项序号设置

selId.options[2].selected = true;//把第三项设置为当前选项，即选项2

3、用选择索引设置

selId.selectedIndex = 2;//把第三项设置为当前选项，即选项2

4、用选项 id 或 namedItem 设置

当 select 的选项有 id 时，可以用 id 或 namedItem 设置当前选项，html 代码如下：

<select id="selecteId">
    <option id="0">请选择</option>
    <option id="1">选项1</option>
    <option id="2">选项2</option>
  </select>

javascript 代码（把第三项设置为当前选项，即选项2）：

document.getElementById("2").selected = true;

或

selId.options.namedItem("2").selected = true;

二、js 获取 select 所有选项的三种情况

1、遍历 select 所有选项的情况

仍以上面的 select 为例，javascript 代码如下：

var selId = document.getElementById("selecteId");
  var items = selId.options;//js 获取 select 所有选项

for (var i = 0; i < items.length; i++) {
    if (items[i].value == "1") {
      alert(items[i].text);
    }
  }

2、暂时保存 select 的所有选项的情况

当用户单击没有用无刷新的上传文件的按钮，完成上传完成后，select 的所有选项丢失，此时就把需要把它的所有选项暂时保存在客户端，以便复原 select 上传前的数据，javascript 代码如下：

单击按钮前，暂时保存 select 所有选项代码：

var selId = document.getElementById("selecteId");
  var items = selId.innerHTML;

单击按钮后，复原 select 所有选项代码：

selId.innerHTML = items;

以上代码是暂时保存 select 的内部文本（即 innerHTML），这种方式既简单又有效；复原后，还可以通 selId.value = "选择值" 的方式复原用户的选择项。

3、暂时保存用户选项

把用户选择的项保存到一个变量，代码为：

var index = selId.selectedIndex; //保存选项的索引

把保存的用户选项设置为当前选项，代码为：

selId.selectedIndex = index;