鍍金池/ 問答/HTML5  Java  HTML/ select 預(yù)選,增加 刪除怎么寫?

select 預(yù)選,增加 刪除怎么寫?

1.兩個下拉框,左邊下拉框是預(yù)選的,右邊是空的,左邊下拉框選中其中某幾項然后點擊右箭頭按鈕,選中的那幾項就移動到右邊的下拉框帶提交;
2.右邊下拉框和左邊一樣選中哪幾項點擊左箭頭移動到左邊,如下圖初學(xué)者不知道怎么寫了圖片描述;

圖片描述

回答
編輯回答
伴謊

解決了:
圖片描述

2017年4月30日 15:56
編輯回答
淺時光
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <select multiple="multiple" class="s1">
        <option value="1">上海1</option>
        <option value="2">上海2</option>
        <option value="3">上海3</option>
    </select>
    <select multiple="multiple" class="s2">
    </select>
    <div>
        <button class="left">&lt;</button>
        <button class="right">&gt;</button>
    </div>
    <script src="http://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script type="text/javascript">
    var s1 = document.querySelector(".s1");
    var s2 = document.querySelector(".s2");

    var left = document.querySelector(".left");
    var right = document.querySelector(".right");


    left.onclick = function() {
        for (var i = s2.selectedOptions.length-1; i >= 0; i--) {
         s1.appendChild(s2.selectedOptions[i]);
        }
         selectSort($(".s1 option"));
    }
    right.onclick = function() {
        for (var i = s1.selectedOptions.length-1; i >= 0; i--) {
         s2.appendChild(s1.selectedOptions[i]);
        }
         selectSort($(".s2 option"));
    }

    function selectSort(element){
        //把元素轉(zhuǎn)為數(shù)組，獲得一個包含所有子元素的數(shù)組副本
        var arr=Array.from(element);
        //定義排序規(guī)則函數(shù)
        function sortby(a,b){
           return (a.value-b.value);
        }
        //調(diào)用 數(shù)組sort 方法 排序
        arr.sort(sortby);
        //定義一個變量 html 作為最后要拼接到文檔中的DOM片段
        var html = "";
        //調(diào)用 數(shù)組filter方法，把數(shù)組中每個成員都加入到變量 html 中
        arr.filter(function (value){html+=value.outerHTML});
        //把準(zhǔn)備好的 DOM片段 也就是變量 html 替換元素內(nèi)容
        element.parent().html(html);
    }
    </script>
</body>

</html>

這段代碼 應(yīng)該能實現(xiàn)效果

2017年11月2日 23:55