JavaScript-select options操作(兼容IE和FireFox)

作者：聂勇 欢迎转载，请保留作者信息并说明文章来源！

• 执行环境
• HTML代码片断
• JavaScript代码
• 知识点

执行环境

• IE 6
• FireFox 2.0.X

HTML代码片断

<form id="form1" name="form1" method="post" action="">
  <table width="100%" border="0" cellpadding="3" cellspacing="1" class="table_add">
    <tr>
      <th class="long100">来电类型</th>
      <td colspan="3"><select name="callType" id="callType" onchange="callTypeChange()"></select></td>
    </tr>
    <tr>
      <th scope="row">行为</th>
      <td colspan="3"><select name="searchType" id="searchType"></select></td>
    </tr>
    <tr>
      <th scope="row">结果</th>
      <td colspan="3"><select name="callResult" id="callResult"></select></td>
    </tr>
    <tr>
      <th scope="row">创建工号</th>
      <td colspan="3">901</td>
    </tr>
    <tr>
      <th scope="row">来电客户</th>
      <td>朱先生</td>
      <th class="long100">来电主叫</th>
      <td>02087111933</td>
    </tr>
  </table>
  <div>
    <input type="submit" name="Submit" value="保&nbsp;存" />
    <input type="reset" name="Submit2" value="重&nbsp;置" />
    <input type="button" name="Submit3" value="关闭窗口" onclick="javascript:window.close()" />
  </div>
</form>

运行结果如图1所示：

JavaScript代码

var callType = new Array();
callType[0] = ["1", "订座"];
callType[1] = ["2", "咨询"];
callType[2] = ["3", "来电放弃"];

var searchType = new Array();
searchType[0] = new Array();
searchType[0][0] = ["1", "精确查询签约商家"];
searchType[0][1] = ["2", "精确查询非签约商家"];
searchType[0][2] = ["3", "精确查询非签约商家，推荐"];
searchType[0][3] = ["4", "模糊查询，推荐签约商家"];
searchType[0][4] = ["5", "其他项目的预订需求"];
searchType[1] = new Array();
searchType[2] = new Array();

var callResult = new Array();
callResult[0] = new Array();
callResult[0][0] = ["1", "预订"];

callResult[1] = new Array();
callResult[1][0] = ["1", "精确查询签约商家"];
callResult[1][1] = ["2", "精确查询非签约商家"];
callResult[1][2] = ["3", "模糊查询，有预订需求"];
callResult[1][3] = ["4", "模糊查询，无预订需求"];
callResult[1][4] = ["5", "其他项目的预订需求"];
callResult[1][5] = ["6", "查询其他行业电话"];
callResult[1][6] = ["7", "商家资料没有登记"];
callResult[1][7] = ["8", "最低消费太高"];
callResult[1][8] = ["9", "没有优惠折扣"];
callResult[1][9] = ["10", "致电只想查号或地址"];
callResult[1][10] = ["11", "觉得麻烦还是自行致电"];
callResult[1][11] = ["12", "商家预订已满"];

callResult[2] = new Array();
callResult[2][0] = ["1", "话务员挂断"];
callResult[2][1] = ["2", "商家挂断"];
callResult[2][2] = ["3", "-用户挂断"];

// 初始化
function init() {
    var callTypeEle = document.getElementById("callType");
    for(var index=0; index<callType.length; index++) {
        callTypeEle.options.add(new Option(callType[index][1], callType[index][0]));
    }
         
    callTypeChange();
}
    
// 来电类型选项改变时调用
function callTypeChange() {
    var callTypeEle = document.getElementById("callType");
    var searchTypeEle = document.getElementById("searchType");
    var callResultEle = document.getElementById("callResult");

    var si = callTypeEle.selectedIndex;

    // 行为
    searchTypeEle.innerHTML = "";
    for(var index=0; index<searchType[si].length; index++) {
        searchTypeEle.options.add(new Option(searchType[si][index][1], searchType[si][index][0]));
    }

    // 结果
    callResultEle.innerHTML = "";
    for(var index=0; index<callResult[si].length; index++) {
        callResultEle.options.add(new Option(callResult[si][index][1], callResult[si][index][0]));
    } 
}

知识点

1、删除select中的所有options：

document.getElementById("id").options.innerHTML = "";

2、删除select中的某一项option：

document.getElementById("id").options.remove(indx);

3、添加select中的项option:

document.getElementById("id").options.add(new Option(text,value));

用标准的DOM操作 document.createElement，appendChild，removeChild 也同样可以达到目的。