注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

0与1构筑世界,程序员创造时代

软件架构设计 Java编程

 
 
 

日志

 
 

select options 操作(兼容IE和FireFox)  

2008-03-14 09:46:38|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
文章声明

  
作者:
傲风(aofengemail@126.com)       编写时间:2008年03月14日

网址:http://aofengblog.blog.163.com

?保留所有权利!

执行环境: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>

运行结果如图A所示:
select options 操作(兼容IE和FireFox) - 傲风 - 宝剑锋从磨砺出 梅花香自苦寒来
图A

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]));
         }
 }
//-->

知识点:
  删除select中的所有options:
  document.getElementById("id").options.innerHTML = "";

  删除select中的某一项option:
  document.getElementById("id").options.remove(indx);

  添加select中的项option:
  document.getElementById("id").options.add(new Option(text,value));

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

<正文结束>   

   
  评论这张
 
阅读(1669)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017