查询HTML标签select中options的值并定位其位置

最新推荐文章于 2022-02-24 17:15:28 发布

weixin_30266829

最新推荐文章于 2022-02-24 17:15:28 发布

阅读量619

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/kingangWang/archive/2011/12/30/2307595.html

版权

查询HTML标签select中options的值并定位其位置！

JavaScript实现！

示例：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> 
<HTML> 
<HEAD> 
　<TITLE>NewDocument</TITLE> 
　<META NAME="Author" CONTENT="majianan"> 
<SCRIPT> 
　　varcurrentSel=null; 
　　function setButton(obj){　　　　 
　　　　if(obj.length==0)return; 
　　　　currentSel=obj; 
　　　　if(obj.id=="leftSel"){ 
　　　　　　document.getElementById("btnLeft").disabled=true; 
　　　　　　document.getElementById("btnRight").disabled=false;　　　　　　　　 
　　　　　　reSelect(document.getElementById("rightSel"));　　　　　　 
　　　　}else{ 
　　　　　　document.getElementById("btnLeft").disabled=false; 
　　　　　　document.getElementById("btnRight").disabled=true;　　　　　　　 
　　　　　　reSelect(document.getElementById("leftSel"));　　　　　　　　 
　　　　}　　　 
　　} 
　　　function move(){ 
　　　　　if(arguments.length==1){ 
　　　　　　　moveUp(arguments[0]); 
　　　　　}else if(arguments.length==2){ 
　　　　　　　moveRight(arguments[0],arguments[1]); 
　　　　　} 
　　　} 
　　　function moveUp(direction){ 
　　　　　if(currentSel==null)
return; 
　　　　　if(direction){//up 
　　　　　　if(currentSel.selectedIndex>0){　 
　　　　　　　　for(vari=0;i<currentSel.length;i++){ 
　　　　　　　　　　if(currentSel[i].selected){ 
　　　　　　　　　　　　var oOption=currentSel.options[i]; 
　　　　　　　　　　　　var oPrevOption=currentSel.options[i---1]; 
　　　　　　　　　　　　currentSel.insertBefore(oOption,oPrevOption); 
　　　　　　　　　　} 
　　　　　　　　}　　　　　　　　 
　　　　　　} 
　　　　　}else{//down 
　　　　　　for(var i=currentSel.length-1;i>=0;i--){ 
　　　　　　　　if(currentSel[i].selected){ 
　　　　　　　　　　if(i==currentSel.length-1)return; 
　　　　　　　　　　var oOption=currentSel.options[i]; 
　　　　　　　　　　var oNextOption=currentSel.options[i+1]; 
　　　　　　　　　　currentSel.insertBefore(oNextOption,oOption);　　　　　　　　　　　　 
　　　　　　　　} 
　　　　　　} 
　　　　　} 
　　　} 
　　function moveRight(src,des){ 
　　　　if(src.selectedIndex==-1){ 
　　　　　　alert("Please select first!"); 
　　　　　　return; 
　　　　} 
　　　　for(var i=0;i<src.length;i++){ 
　　　　　　if(src[i].selected){ 
　　　　　　　　des.appendChild(src.options[i--]); 
　　　　　　} 
　　　　} 
　　　　setButton(des); 
　　} 
　　 
　　function reSelect(obj){ 
　　　　for(var i=0;i<obj.length;i++){ 
　　　　　　if(obj[i].selected)obj[i].selected=false; 
　　　　} 
　　} 

function chaxun()
    {
var e=document.getElementById("rightSel");
var txt=document.getElementById("CHAXUN").value;
for(var i =0;i<e.options.length;i++)
        {
if(e.options[i].value == txt))
            {
                e.options[i].selected=true;
            }
else
                e.options[i].selected=false;
        }
    }
　　</SCRIPT> 
</HEAD> 
<BODY> 
　<tr> 
　<td>   <input type="text" id="CHAXUN" size="53" maxlength="1000"  value=""></td>
<td>  <input type="submit" id="Submit" value="查询"  onclick="chaxun();" title="查询">
</td>
</tr>
　<form id="form1"> 
　　　<table width="40%"align="center"> 
　　　　　<tr> 
　　　　　　　<td> 
　　　　　　　　　<input type="button" value="Up" id="btnUp" onClick="move(true);"style="width:65"/> 
　　　　　　　　<br/> 
　　　　　　　　<input type="button" value="Down" id="btnDowm" onClick="move(false);"style="width:65"/>　　　　　　　　 
　　　　　　　</td> 
　　　　　　　<td> 
　　　　　　　　　<select multiple id="leftSel" onclick="setButton(this)" ondblclick="document.getElementById('btnRight').click()" style="height:200px;width:100px;"> 
　　　　　　　　　　<option value="Java">Java</option> 
　　　　　　　　　　<option value="JavaScript">JavaScript</option> 
　　　　　　　　　　<option value="C++">C++</option> 
　　　　　　　　　　<option value="HTML">HTML</option> 
　　　　　　　　</select> 
　　　　　　</td> 
　　　　　　<td> 
　　　　　　　　<input type="button" value=">>" id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65"/> 
　　　　　　　　<br/> 
　　　　　　　　<input type="button" value="<<" id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65"/> 
　　　　　　　　</td> 
　　　　　　　　<td> 
　　　　　　　　　　<select multiple id="rightSel" onclick="setButton(this)"　ondblclick="document.getElementById('btnLeft').click()" style="height:200px;width:100px;"> 
　　　　　　　　　　<option value="CSS">CSS</option> 
　　　　　　　　　　<option value=".Net">.Net</option> 
　　　　　　　　　　</select> 
　　　　　　　　</td> 
　　　　　　</tr> 
　　　　</table> 
　　</form> 
</BODY> 
</HTML>