JS对select动态添加options操作[IE和FireFox兼容]

roming

浏览: 40637 次
性别:
来自: 上海

最近访客更多访客>>

zhangke1984

leeqi

随意而生

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

IE Firefox JavaScript VBScript ASP

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS对select动态添加options操作[IE和FireFox兼容] XiYe.Cn</title>

<script language="javascript" type="text/javascript">
function xlbchange(s){

switch (s){
   case "1" :
      document.getElementById("lb").options.length=0;
    var soojsvalue=[0,1,2,3];
   var soojs_text=["精神提炼","作风<a target="_blank" href="http://www.xiye.cn" class="UBBWordLink">设计</a>","目标设置","理念提升"];
   for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");
     oOption.value=soojs_value[i];
     oOption.text=soojs_text[i];
     zpmange.lb.options.add(oOption);
     }
      break;
   case "2" :
      document.getElementById("lb").options.length=0;
    var soojsvalue=[0,1,2,3,4,5,6,7];
   var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画册","宣传光盘","办公用品纪念品"];
   for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");
     oOption.value=soojs_value[i];
     oOption.text=soojs_text[i];
     zpmange.lb.options.add(oOption);
     }
      break;
        case "3":
   document.getElementById("lb").options.length=0;
    var soojsvalue=[0,1,2,3];
   var soojs_text=["<a target="_blank" href="http://www.xiye.cn" class="UBBWordLink">西也</a><a target="_blank" href="http://www.xiye.cn" class="UBBWordLink">设计</a>","站长资源","<a target="_blank" href="http://www.xiye.cn" class="UBBWordLink">西也</a>站长资源网","西讯论坛"];
   for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");
     oOption.value=soojs_value[i];
     oOption.text=soojs_text[i];
     zpmange.lb.options.add(oOption);
     }
break;
        case "4":
   document.getElementById("lb").options.length=0;
    var soojsvalue=[0,1,2];
   var soojs_text=["学校制度","文化活动","行为规范"];
   for ( var i=0;i<soojs_value.length;i++){
     var   oOption   =   document.createElement("OPTION");
     oOption.value=soojs_value[i];
     oOption.text=soojs_text[i];
     zpmange.lb.options.add(oOption);
     }
break;
default :
   document.getElementById("lb").options.length=0;
var   oOption   =   document.createElement("OPTION");
     oOption.value=0;
     oOption.text="请选择作品类别";
zpmange.lb.options.add(oOption);
}
}
</script>
</head>
<body>
<form action="zpmange.asp" name="zpmange" method="post">
<p><select id="ddlResourceType" onchange="getvalue(this)"><br />
</select></p>
<p> 动态删除select中的所有options： <br />
    document.getElementById("ddlResourceType").options.length=0; <br />
<br />
    动态删除select中的某一项option： <br />
    document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 动态添加select中的项option: <br />
    document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上面在IE和FireFox都能测试成功，希望以后你可以用上。 <br />
    其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。 </p>
<p>取值方面<br />
    function getvalue(obj)<br />
    {<br />
    var m=obj.options[obj.selectedIndex].value<br />
    alert(m);//获取value<br />
    var n=obj.options[obj.selectedIndex].text<br />
    alert(n);//获取文本<br />
    }<br />
</p>
<p>例子：</p>
<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
    <tr>
      <td width="50%" height="41" ><div align="center">

            <select name="xt" id="xt" onchange="xlbchange(this.value)">
          <option selected="selected">请选择作品系统</option>
                  <option value="1">理念视别系统</option>
                  <option value="2">视觉识别系统</option>
                  <option value="3">环境视别系统</option>
                  <option value="4">行为视别系统</option>
        </select>

      </div></td>
      <td width="61%" ><div align="center">
        <select name="lb" id="lb">
<option selected="selected">请选择作品类别</option>

        </select>
      </div></td>
    </tr>
    <tr>
      <td height="203" colspan="2" > </td>
    </tr>
</table>
</form>
</body>
</html>