select 左右移动(原先项目中的权限)

最新推荐文章于 2013-08-09 10:47:35 发布

smartfirstme

最新推荐文章于 2013-08-09 10:47:35 发布

阅读量68

点赞数

分类专栏： javaScript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/smartfirstme/article/details/83695470

版权

javaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html>
  <head>
    <title>test.html</title>
     <script type="text/javascript">
        function addItem(sour,dest){
         if(sour.selectedIndex==-1){
          return;
         }
        var sourText = sour.options[sour.selectedIndex].text;
        var sourValue = sour.options[sour.selectedIndex].value;
        dest.options.add(new Option(sourText,sourValue));
        sour.options.remove(sour.selectedIndex); 
        }
        
         function addItemAll(sour,dest){
         if(sour.length==-1){
          return;
         }
         for(var i=0;i<sour.length;i++){
        var sourText = sour.options[i].text;
        var sourValue = sour.options[i].value;
        dest.options.add(new Option(sourText,sourValue));
         } 
          var k=0;
         while((k = sour.length-1)>=0){
          sour.options.remove(k); 
          }
        }
     </script>
  </head>
  
  <body>
    <form name="from1" action="action1">
      <table name="table1">
      <tr>
        <td>
        可用：<br>
       <select name="leftSelect" multiple="multiple" style="width:300px;heigth:300px;" οndblclick="addItem(leftSelect,rightSelect)">
           <option value="loption1" >101项</option>
           <option value="loption2" >102项</option>
           <option value="loption3" >103项</option>
           <option value="loption4"  >104项</option>
           <option value="loption5"  >105项</option>
       </select>
       </td>

       <td>
             <input name="addButton" type="button" value="添加>>" οnclick="addItem(leftSelect,rightSelect)"/> 
              <br>
             <input name="addAll" type="button" value="全部添加>>" οnclick="addItemAll(leftSelect,rightSelect)"/>
              <br>
             <input name="removeButton" type ="button" value="移出" οnclick="addItem(rightSelect,leftSelect)"/>
              <br>
             <input name="reMoveAll" type="button" value="全部移除" οnclick="addItemAll(rightSelect,leftSelect)"/>
         </td>

        <td>
        现有:<br>
       <select name="rightSelect"  multiple="multiple"  style="width:300px;heigth:300px;" οndblclick="addItem(rightSelect,leftSelect)">
           <option value="roption1" >96项</option>
           <option value="roption2" >97项</option>
           <option value="roption3" >98项</option>
           <option value="roption4" >99项</option>
           <option value="roption5" >100项</option>
       </select>
       </td>
       </tr>
       </table>
    </form>
  </body>
</html>