js 操作select 下拉框集合常见操作方法

来源：互联网发布：node pm2 使用编辑：程序博客网时间：2024/05/17 22:54
  <select id="ddlResourceType" onchange="getvalue(this)"> </select>     动态删除select中的所有options：        document.getElementById("ddlResourceType").options.length=0;      动态删除select中的某一项option：        document.getElementById("ddlResourceType").options.remove(indx);      动态添加select中的项option:        document.getElementById("ddlResourceType").options.add(new Option(text,value));      上面在IE和FireFox都能测试成功，希望以后你可以用上。 其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。 取值方面     function getvalue(obj)     {         var m=obj.options[obj.selectedIndex].value         alert(m);//获取value         var n=obj.options[obj.selectedIndex].text         alert(n);//获取文本     } ============================================================================== 1 检测是否有选中 if (objSelect.selectedIndex > - 1 ) { // 说明选中 } else { // 说明没有选中 } 2 删除被选中的项 objSelect.options[objSelect.selectedIndex] = null ; 3 增加项 objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " ); 4 修改所选择中的项 objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " ); 5 得到所选择项的文本 objSelect.options[objSelect.selectedIndex].text; 6 得到所选择项的值 objSelect.options[objSelect.selectedIndex].value; ====================================================================== <%@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兼容]</title> <script language="javascript" type="text/javascript"> function xlbchange(s){ switch (s){    case "1" :        document.getElementById("lb").options.length=0;      var soojs_value=[0,1,2,3];     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 "2" :        document.getElementById("lb").options.length=0;      var soojs_value=[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 soojs_value=[0,1,2,3];     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 "4":     document.getElementById("lb").options.length=0;      var soojs_value=[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>、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue"的Item为选中 8得到select的当前选中项的value 9得到select的当前选中项的text 10得到select的当前选中项的Index 11清空select的项 // 1.判断select选项中 是否存在Value="paraValue"的Item        function jsSelectIsExitItem(objSelect, objItemValue) {            var isExit = false;            for (var i = 0; i < objSelect.options.length; i++) {                if (objSelect.options.value == objItemValue) {                    isExit = true;                    break;                }            }            return isExit;        }        // 2.向select选项中 加入一个Item        function jsAddItemToSelect(objSelect, objItemText, objItemValue) {            //判断是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                alert("该Item的Value值已经存在");            } else {                var varItem = new Option(objItemText, objItemValue);              objSelect.options.add(varItem);            alert("成功加入");        }        }        // 3.从select选项中 删除一个Item        function jsRemoveItemFromSelect(objSelect, objItemValue) {            //判断是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                for (var i = 0; i < objSelect.options.length; i++) {                    if (objSelect.options.value == objItemValue) {                        objSelect.options.remove(i);                        break;                    }                }                alert("成功删除");            } else {                alert("该select中 不存在该项");            }        }    // 4.删除select中选中的项    function jsRemoveSelectedItemFromSelect(objSelect) {            var length = objSelect.options.length - 1;        for(var i = length; i >= 0; i--){            if(objSelect.selected == true){                objSelect.options = null;            }        }    }      // 5.修改select选项中 value="paraValue"的text为"paraText"        function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {            //判断是否存在            if (jsSelectIsExitItem(objSelect, objItemValue)) {                for (var i = 0; i < objSelect.options.length; i++) {                    if (objSelect.options.value == objItemValue) {                        objSelect.options.text = objItemText;                        break;                    }                }                alert("成功修改");            } else {                alert("该select中 不存在该项");            }        }        // 6.设置select中text="paraText"的第一个Item为选中        function jsSelectItemByValue(objSelect, objItemText) {                //判断是否存在            var isExit = false;            for (var i = 0; i < objSelect.options.length; i++) {                if (objSelect.options.text == objItemText) {                    objSelect.options.selected = true;                    isExit = true;                    break;                }            }                  //Show出结果            if (isExit) {                alert("成功选中");            } else {                alert("该select中 不存在该项");            }        }        // 7.设置select中value="paraValue"的Item为选中    document.all.objSelect.value = objItemValue;    // 8.得到select的当前选中项的value    var currSelectValue = document.all.objSelect.value;    // 9.得到select的当前选中项的text    var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    // 10.得到select的当前选中项的Index    var currSelectIndex = document.all.objSelect.selectedIndex;    // 11.清空select的项    document.all.objSelect.options.length = 0;