WEB开发网
开发学院网页设计JavaScript 【JavaScript】列表元素上下左右移动:Select和Op... 阅读

【JavaScript】列表元素上下左右移动:Select和Option的应用

 2010-09-14 13:37:24 来源:WEB开发网   
核心提示:功能如下:支持一次选中多项在左右列表中来回移动代码如下:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE&g

功能如下:

支持一次选中多项在左右列表中来回移动

【JavaScript】列表元素上下左右移动:Select和Option的应用

代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
 <TITLE>NewDocument</TITLE>
 <METANAME="Author"CONTENT="majianan">
 <scriptlanguage="javascript">
   varcurrentSel=null;
   functionmove(){
     if(arguments.length==1){
       moveUp(arguments[0]);
     }elseif(arguments.length==2){
       moveRight(arguments[0],arguments[1]);
     }
   }
   functionmoveUp(direction){
     if(currentSel==null)return;
     varindex=currentSel.selectedIndex;
     if(direction){//up
       if(index==0)return;
       
       varvalue=currentSel.options[index-1].value;
       vartext=currentSel.options[index-1].text;
       
       currentSel.options[index-1].value=currentSel.options[index].value;
       currentSel.options[index-1].text=currentSel.options[index].text;
       
       currentSel.options[index].value=value;
       currentSel.options[index].text=text;
       
       currentSel.options[index].selected=false;
       currentSel.options[index-1].selected=true;
     }else{//down
       if(index==(currentSel.length-1))return;
       
       varvalue=currentSel.options[index+1].value;
       vartext=currentSel.options[index+1].text;
       
       currentSel.options[index+1].value=currentSel.options[index].value;
       currentSel.options[index+1].text=currentSel.options[index].text;
       
       currentSel.options[index].value=value;
       currentSel.options[index].text=text;
       
       currentSel.options[index].selected=false;
       currentSel.options[index+1].selected=true;
     }
   }
  functionmoveRight(src,des){
    if(src.selectedIndex==-1){
      alert("Pleaseselectfirst!");
      return;
    }
    for(vari=0;i<src.length;i++){
      if(src[i].selected){
        varop=document.createElement("option");
        op.value=src.options[src.selectedIndex].value;
        op.text=src.options[src.selectedIndex].text;
        des.options.add(op);
          src.remove(i);
          i--;
      }
    } 
  }
  functionsetButton(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"));        
    }   
  }
  
  functionreSelect(obj){
    for(vari=0;i<obj.length;i++){
      if(obj[i].selected)obj[i].selected=false;
    }
  }
  </script>
</HEAD>
<BODY>
 <formid="form1">
   <tablewidth="40%"align="center">
     <tr>
       <td>
         <inputtype="button"value="Up"id="btnUp"onClick="move(true);"style="width:65"/>
        <br/>
        <inputtype="button"value="Down"id="btnDowm"onClick="move(false);"style="width:65"/>        
       </td>
       <td>
         <selectmultipleid="leftSel"onclick="setButton(this)"ondblclick="document.getElementById('btnRight').click()"style="height:200px;width:100px;">
          <optgrouplabel="LeftList"/>
          <optionvalue="1">Java</option>
          <optionvalue="2">JavaScript</option>
          <optionvalue="3">C++</option>
          <optionvalue="4">HTML</option>
        </select>
      </td>
      <td>
        <inputtype="button"value=">>"id="btnRight"onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));"style="width:65"/>
        <br/>
        <inputtype="button"value="<<"id="btnLeft"onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));"style="width:65"/>
        </td>
        <td>
          <selectmultipleid="rightSel"onclick="setButton(this)" ondblclick="document.getElementById('btnLeft').click()"style="height:200px;width:100px;">
          <optgrouplabel="RightList"/>
          <optionvalue="5">CSS</option>
          <optionvalue="6">.Net</option>
          </select>
        </td>
      </tr>
    </table>
  </form>
</BODY>
</HTML>

Tags:JavaScript 列表 元素

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接