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>