JS 控制 兩個ListBox之間選擇移動項 (轉發)

風本無型發表於2018-04-16

第一種-文章出處—-> www.miniui.com/demo/listbox/moveitems.html

<body>
    <h1>兩個ListBox之間選擇移動項 </h1>     

    <input type=”button” value=”Save” onclick=”saveData()” style=”width:55px;”/>
    <table >
        <tr>
            <td >
                <div id=”listbox1″ class=”mini-listbox” style=”width:150px;height:150px;”
                    textField=”text” valueField=”id” showCheckBox=”true” multiSelect=”true”
                    url=”../data/countrys.txt”>
                </div>
            </td>
            <td style=”width:120px;text-align:center;”>
                <input type=”button” value=”>” onclick=”add()” style=”width:40px;”/><br />
                <input type=”button” value=”>>” onclick=”addAll()” style=”width:40px;”/><br />
                <input type=”button” value=”&lt;&lt;” onclick=”removeAll()” style=”width:40px;”/><br />
                <input type=”button” value=”&lt;” onclick=”removes()” style=”width:40px;”/><br />

            </td>
            <td>
                <div id=”listbox2″ class=”mini-listbox” style=”width:250px;height:150px;”                    
                     showCheckBox=”true” multiSelect=”true” >    
                    <div property=”columns”>
                        <div header=”ID” field=”id”></div>
                        <div header=”國家” field=”text”></div>
                    </div>
                </div>
            </td>
            <td style=”width:50px;text-align:center;vertical-align:bottom”>
                <input type=”button” value=”Up” onclick=”upItem()” style=”width:55px;”/>
                <input type=”button” value=”Down” onclick=”downItem()” style=”width:55px;”/>

            </td>
        </tr>
   
    </table>   
   
    <script type=”text/javascript”>
        mini.parse();
        var listbox1 = mini.get(“listbox1”);
        var listbox2 = mini.get(“listbox2”);

        function add() {
            var items = listbox1.getSelecteds();
            listbox1.removeItems(items);
            listbox2.addItems(items);
        }
        function addAll() {       
            var items = listbox1.getData();
            listbox1.removeItems(items);
            listbox2.addItems(items);
        }
        function removes() {
            var items = listbox2.getSelecteds();
            listbox2.removeItems(items);
            listbox1.addItems(items);
        }
        function removeAll() {
            var items = listbox2.getData();
            listbox2.removeItems(items);
            listbox1.addItems(items);
        }
        function upItem() {
            var items = listbox2.getSelecteds();
            for (var i = 0, l = items.length; i < l; i++) {
                var item = items[i];
                var index = listbox2.indexOf(item);
                listbox2.moveItem(item, index-1);
            }
        }
        function downItem() {           
            var items = listbox2.getSelecteds();           
            for (var i = items.length-1; i >=0; i–) {
                var item = items[i];
                var index = listbox2.indexOf(item);
                listbox2.moveItem(item, index + 1);
            }
        }
        function saveData() {
            var data = listbox2.getData();
            var json = mini.encode(data);
            alert(json);
        }
    </script>

    <div class=”description”>
        <h3>Description</h3>
        <p>演示在兩個ListBox之間,移動資料。
        </p>
    </div>
</body>

—————-

第二種,同事寫的

<body>
    <h1>兩個ListBox之間選擇移動項 </h1>     

  <div class=”main-content”>
 
            <div>

                <select id=”s1″ name=”s1″ multiple=”true” style=”height: 150px; width: 180px;white-space: normal;overflow-y:scroll”>
                    <option value=”a” style=” float:left;”>專案1</option>
                    <option value=”b” style=” float:left;”>專案2</option>
                    <option value=”c” style=” float:left;”>專案3</option>
                    <option value=”d” style=” float:left;”>專案4</option>
                    <option value=”e” style=” float:left;”>專案5</option>
                    <option value=”6f” style=” float:left;”>專案6</option>
                    <option value=”7h” style=” float:left;”>專案7</option>
                    <option value=”8k” style=” float:left;”>專案8</option>
                    <option value=”9j” style=” float:left;”>專案9</option>
                    <option value=”10l” style=”float:left;”>專案10</option>
                </select>
                <input type=”button” name=”” value=”>>” onclick=”movetos2();” />
                <input type=”button” name=”” value=”<<” onclick=”movetos1();” />
                <select id=”s2″ name=”s2″ multiple=”true” style=”height: 150px; width:180px;white-space: normal;”>
                </select>
               <input type=”button” name=”” value=”確定” onclick=”add()” />
            </div>

            <div id=”ss1″ style=”height: 50px; width: 180px; border:1px solid #807575;overflow-y: scroll;” >

            </div>
        </div>

   
    <script type=”text/javascript”>
       

   function movetos2() {
            var s1 = document.getElementById(“s1”);
            var s2 = document.getElementById(“s2”);
            var i;
            for (i = 0; i < s1.options.length; i++) {
                if (s1.options[i].selected) {
                    s2.appendChild(s1.options[i]);
                }
            }
        }

        function movetos1() {
            var s1 = document.getElementById(“s1”);
            var s2 = document.getElementById(“s2”);
            var i;
            for (i = 0; i < s2.options.length; i++) {
                if (s2.options[i].selected) {
                    s1.appendChild(s2.options[i]);
                }
            }
        }

        var htmlArr1 =[];
        function add() {
            var s2 = document.getElementById(“s2”);
            var ss1 = document.getElementById(“ss1”);
            var i;
            var html = “”;
            htmlArr = [];
            ss1.innerHTML = “”;
            var len = s2.options.length;
            for (i = 0; i < len; i++) {
                ; (function (i) {
                    //s2.removeChild(s2.options[i]);
                    html += “<span style=`margin-right:4px;`>” + s2.options[i].text + “</span>”;
                    var val = s2.options[i].value;
                    var text = s2.options[i].text;
                    var sss =
                    htmlArr.push(val+`:`+text);
                    if (i == len – 1) {
                        ss1.innerHTML = html;
                        $(ss1).data(`json`, htmlArr);
                        //ss1.setAttribute(“data-json”, htmlArr);
                    }
                })(i);
            }

        }

    </script>

</body>

相關文章