查询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="65"/>
<br/>
<input type="button" value="Down" id="btnDowm" onClick="move(false);"style="65"/>
</td>
<td>
<select multiple id="leftSel" onclick="setButton(this)" ondblclick="document.getElementById('btnRight').click()" style="height:200px;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="65"/>
<br/>
<input type="button" value="<<" id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="65"/>
</td>
<td>
<select multiple id="rightSel" onclick="setButton(this)" ondblclick="document.getElementById('btnLeft').click()" style="height:200px;100px;">
<option value="CSS">CSS</option>
<option value=".Net">.Net</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>