左右选中

左右选中

  技术分析:

    1.确定事件,按钮的单击事件

    2.编写函数:

      点击移动单个的:

        a.获取左边选中的选项  select对象.option  --数组

          遍历数组  判断是否选中   option对象.selected

        b.将其追加到右边的下拉选中

          rightSelect对象.appendChild(option)

      点击移动所有的

        a.获取左边的所有选项

        b.将其一个个追加到右边下拉选中

<html>
  <head>
    <title>左右选中.htmltitle>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        
    script>
    <style>
        input[type='button']{
            width:50px;
        }
    style>
    head>
     <script>
         onload = function(){
             //单选左右选中,给单移按钮派发事件
             document.getElementById("toRight1").onclick = function(){
                 //获取左边所有的option
                 var arr = document.getElementById("left").options;
                 for(var i = 0; i<arr.length;i++){
                     //判断选中状态
                     if(arr[i].selected){
                         document.getElementById("right").appendChild(arr[i]);
                         break;
                     }
                 }
             }
             //多选左右选中,给多移按钮派发事件
             document.getElementById("toRight2").onclick = function(){
                 //获取左边所有的option
                 var arr = document.getElementById("left").options;
                 for(var i = 0; i<arr.length;i++){
                     //判断选中状态
                     if(arr[i].selected){
                         document.getElementById("right").appendChild(arr[i]);
                     }
                 }
             }
             //全选左右选中,给全移派发事件
             document.getElementById("toRight3").onclick = function(){
                 //获取左边所有的option
                 var arr = document.getElementById("left").options;
                 for(var i = 0; i<arr.length;){
                         document.getElementById("right").appendChild(arr[i]);
                 }
             }
         }
     script>
    <body>
        <table>
            <tr>
                <td>
                    <select id="left" multiple="true" style="width:100px" size="10">
                        <option>option>
                        <option>option>
                        <option>option>
                        <option>option>
                        <option>option>
                        <option>option>
                        <option>option>
                        <option>option>
                    select>
                td>
                <td>
                    <input type="button" value=">" id="toRight1"><br>
                    <input type="button" value=">>" id="toRight2"><br>
                    <input type="button" value=">>>" id="toRight3"><br><br>
                    <input type="button" value="<" id="toLeft1"><br>
                    <input type="button" value="<<" id="toLeft2"><br>
                    <input type="button" value="<<<" id="toLeft3">
                td>
                <td>
                    <select id="right" multiple="true" style="width:100px" size="10">
                        
                    select>
                td>
            tr>
        table>
    body>

html>

 

     

你可能感兴趣的:(左右选中)