热门栏目:  公务员继续教育  专业技术人员继续教育  工勤人员继续教育  路之遥博客

您的位置:首页>路之遥博客>JAVASCRIPT

下拉框实现从左栏到右栏的选择

2014-05-08 06:18 浏览: 0

摘要: 下拉框实现从左栏到右栏的选择...

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>selectOption.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    
    <script type="text/javascript">
    //获取左边选择的;
    function getLeftSelectOpt(left,right,selectType){
    var leftSelectObj = document.getElementById(left);
    var rightSelectObj = document.getElementById(right);
 
    if(selectType!=null && selectType=='allOption'){
    selectAllOption(left,right);
    }else{
    for(var i = 0;i<leftSelectObj.length;i++){
    //获取选中的;
    if(leftSelectObj[i].selected){
    //option中,第一个参数,是显示的名称,第二个是value;
    var op=new Option(leftSelectObj[i].innerHTML,leftSelectObj[i].value);
    rightSelectObj.options.add(op);
    leftSelectObj.options.remove(i);
    }
    }
    }
    }
   
    //选择所有;
    function selectAllOption(left,right){
    var leftSelectOption = document.getElementById(left);
    var rightSelectOption =  document.getElementById(right);
    //循环;
    for(var i = 0;i<leftSelectOption.options.length;i++){
    //option中,第一个参数,是显示的名称,第二个是value;
    var op=new Option(leftSelectOption[i].innerHTML,leftSelectOption[i].value);
    rightSelectOption.options.add(op);
   }
    //清空左边select所以option;
    leftSelectOption.options.length = 0;
    }
    </script>
    
    <style type="text/css">
    .btn{
    border:1px solid blue;
    background-color:Silver;
    width:100px;
    }
    </style>
  </head>
  
  <body>
     <form action="#" method="post" name="myForm">
      <center>
      <div style="float: inherit;width: 700px;border:0px solid red;" >
      <span style="float: left;width:100px;text-align: left;">
    请选择:<br/>
 
<
    <select name="leftSID" multiple="multiple" style="overflow:visible;width: 120px;height: 150px;text-align: left">
    <option value="101">董事长</option>
    <option value="102">总经理</option>
    <option value="103">采购员</option>
    <option value="104">接待员</option>
    <option value="105">程序员</option>
    <option value="106">后勤员</option>
    <option value="107">销售员</option>
    <option value="108">会计员</option>
    </select>
    </span> 
   
    <!-- 按钮; -->
    <span style="float: left;width:150px;text-align: center;">
    <br/>
    <input class="btn" type="button" value=">" style="0px solid blue" onclick="getLeftSelectOpt('leftSID','rightSID','sigleOption')">
    <br/><br/>
    <input class="btn" type="button" value=">>" style="0px solid blue" onclick="getLeftSelectOpt('leftSID','rightSID','allOption')">
    <br/><br/>
    <input class="btn" type="button" value="&lt;" style="0px solid blue" onclick="getLeftSelectOpt('rightSID','leftSID','sigleOption')">
    <br/><br/>
    <input class="btn" type="button" value="&lt;&lt;" style="0px solid blue" onclick="getLeftSelectOpt('rightSID','leftSID','allOption')">
    </span>
      <span style="float: left;width:100px;text-align: left;">
选择之后<br/>
    <select name="rightSID" multiple="multiple" multiple="multiple" style="overflow:visible;width: 120px;height: 150px;">
   
    </select>
    </span>
      </div>
      </center>
     </form>
  </body>
</html>
 

你可能也喜欢:

最近更新

路之遥继续教育网,扫描加好友

讨论区最新话题

创新产品推荐

技术支持:常州路之遥软件有限公司 版权所有
备案号:苏ICP备09092440号