javaScript完全操控select标签

在页面中经常会用javaScript对<select>标签的处理，下面我将会对此提供方法来操控它。

例子1：

  <select id="select"> <option value="1">第一项</option> <option value="2">第二项</option> </select> <input id="in1" type="button" value="测试1" onclick="test1()"> <input id="in2" type="button" value="测试2" onclick="test2()"> 

对其操作如下：

//方法1:利用dwr提供的工具类DWRUtil function test1(){ var va=DWRUtil.getValue('select'); //得到select标签选中的value 如上面select中的1，2 var te=DWRUtil.getText('select'); //得到select标签选中的text 如上面的select中的第一项、第二项 DWRUtil.setValue('select','2'); //重新设置select的选中项，其中是根据其value值定的 }

 

当然要用DWRUtil中的方法前要引用dwr.jar，而且还要在页面引入对其的引用，如下：

 <mce:script type='text/javascript' src="<%=rootPath%><!-- /dwr/engine.js"><script> <script type='text/javascript' src="<%=rootPath%>/dwr/util.js"> // --></mce:script>

//方法2 用纯javaScript function test2(){ var city = document.getElementById('select'); //select对象 var cityId = city.selectedIndex; //当前选择的索引 // alert(cityId); var cityValue= city.options[cityId].value; //得到select标签选中值value // alert(cityValue); city.selectedIndex=1; //通过改变其选中索引来改变当前选中项，设置第二项为选中项，注意selectIndex是从0开始的 }

例子2：

<select id="mysel" name="mysel"> <option value="1">1 xxxxxxxxxx</option> <option value="2">2 yyyyyyyyyy</option> <option value="3">3 zzzzzzzzzz</option> <option value="4">4 wwwwwwwwww</option> </select> <button onclick="setSel(3)">设置第３项为选中项</button> <button onclick="clearSel()">清空选择框</button> <button onclick="fillSel()">填充选择框</button> <button onclick="removeSel()">移除第一项</button> <button onclick="editSel()">修改第一项</button> <button onclick="forbidSel()">禁用下拉框</button> <button onclick="testSel()">测试</button> <button onclick="furbishSel()">使下拉框可用</button>

js代码：

<mce:script type="text/javascript"><!-- function setSel(str){ with(document.all){ for(var i=0;i<mysel.options.length;i++){ if (mysel.options[i].value==str){ mysel.selectedIndex=i; break; } } } } function clearSel(){ with(document.all){ mysel.options.length=0; } } function fillSel(){ with(document.all){ mysel.options.length=0; mysel.options[0] = new Option("1 xxxxxxxxxx","1"); mysel.options[1] = new Option("2 yyyyyyyyyy","2"); mysel.options[2] = new Option("3 zzzzzzzzzz","3"); mysel.options[3] = new Option("4 wwwwwwwwww","4"); mysel.options[4] = new Option("5 aaaaaaaaaa","5"); mysel.selectedIndex = 4; } } function removeSel(){ with(document.all){ mysel.remove(0); if (mysel.options.length>0){ mysel.selectedIndex=0; } } } function editSel(){ with(document.all){ if (mysel.options.length>0){ mysel.options[0] = new Option("这是新的第一项","new Value") mysel.selectedIndex=0; } } } function forbidSel(){ document.getElementById('mysel').disabled=true; } function furbishSel(){ document.getElementById('mysel').disabled=false; } function testSel(){ var mysel = document.getElementById('mysel'); alert('mysel所选的值'+mysel.value); //1：得到mysel所选项的value // alert('mysel所选的文本值'+mysel.innerText) 这样得不到mysel所选项的文本值 alert(mysel.length); //2：得到mysel的长度 alert(mysel.options.length); //3：同样也可以得到mysel的长度 for(var i=0;i<mysel.length;i++){ if(mysel[i].selected==true){ alert(mysel[i].value); //4：得到mysel所选项的value 和 1中的mysel.value 一样 alert(mysel[i].innerText); //5：得到mysel所选项的文本值 alert(mysel[i].innetHTML); //6：想以这种方法得到选所项的文本值是错误的 break; //7: 退出循环 } } } // --></mce:script>