开发学院网页设计JavaScript 【JavaScript】列表(Select)选项(Option)的移... 阅读

【JavaScript】列表(Select)选项(Option)的移动(上下左右)

 2010-09-14 13:37:08 来源:WEB开发网   
核心提示:对《【JavaScript】列表元素上下左右移动:Select和Option的应用》中的方法进行了优化。1.使用appendChild()方法优化左右移动函数moveRight()2.使用insertBefore()方法优化上下移动函数moveUp()3.修改同时选中多项上下移动不正常的Bug功能如下:支持一次选中多项

对《【JavaScript】列表元素上下左右移动:Select和Option的应用》中的方法进行了优化。

1.使用appendChild()方法优化左右移动函数moveRight()

2.使用insertBefore()方法优化上下移动函数moveUp()

3.修改同时选中多项上下移动不正常的Bug

功能如下:

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

【JavaScript】列表(Select)选项(Option)的移动(上下左右)

代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
 <TITLE>NewDocument</TITLE>
 <METANAME="Author"CONTENT="majianan">
<SCRIPTlanguage=javascript>
  varcurrentSel=null;
  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"));        
    }   
  }
   functionmove(){
     if(arguments.length==1){
       moveUp(arguments[0]);
     }elseif(arguments.length==2){
       moveRight(arguments[0],arguments[1]);
     }
   }
   functionmoveUp(direction){
     if(currentSel==null)return;
     if(direction){//up
      if(currentSel.selectedIndex>0){ 
        for(vari=0;i<currentSel.length;i++){
          if(currentSel[i].selected){
            varoOption=currentSel.options[i];
            varoPrevOption=currentSel.options[i---1];
            currentSel.insertBefore(oOption,oPrevOption);
          }
        }        
      }
     }else{//down
      for(vari=currentSel.length-1;i>=0;i--){
        if(currentSel[i].selected){
          if(i==currentSel.length-1)return;
          varoOption=currentSel.options[i];
          varoNextOption=currentSel.options[i+1];
          currentSel.insertBefore(oNextOption,oOption);            
        }
      }
     }
   }
  functionmoveRight(src,des){
    if(src.selectedIndex==-1){
      alert("Pleaseselectfirst!");
      return;
    }
    for(vari=0;i<src.length;i++){
      if(src[i].selected){
        des.appendChild(src.options[i--]);
      }
    }
    setButton(des);
  }
  
  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;">
          <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;">
          <optionvalue="5">CSS</option>
          <optionvalue="6">.Net</option>
          </select>
        </td>
      </tr>
    </table>
  </form>
</BODY>
</HTML>

Tags:JavaScript 列表 Select

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接