select 预选,增加 删除怎么写?

1.两个下拉框,左边下拉框是预选的,右边是空的,左边下拉框选中其中某几项然后点击右箭头按钮,选中的那几项就移动到右边的下拉框带提交;
2.右边下拉框和左边一样选中哪几项点击左箭头移动到左边,如下图初学者不知道怎么写了图片描述 ;

图片描述

阅读 3.3k

<!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){
        //把元素转为数组，获得一个包含所有子元素的数组副本
        var arr=Array.from(element);
        //定义排序规则函数
        function sortby(a,b){
           return (a.value-b.value);
        }
        //调用 数组sort 方法 排序
        arr.sort(sortby);
        //定义一个变量 html 作为最后要拼接到文档中的DOM片段
        var html = "";
        //调用 数组filter方法，把数组中每个成员都加入到变量 html 中
        arr.filter(function (value){html+=value.outerHTML});
        //把准备好的 DOM片段 也就是变量 html 替换元素内容
        element.parent().html(html);
    }
    </script>
</body>

</html>

这段代码应该能实现效果

select 预选,增加删除怎么写?

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

小网站有必要将图片放到阿里云OSS存储吗？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

Spring中的两个疑惑?

前端代码更新如何通知用户刷新页面？

select 预选,增加 删除怎么写?

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

小网站有必要将图片放到阿里云OSS存储吗？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

Spring中的两个疑惑?

前端代码更新如何通知用户刷新页面？

select 预选,增加删除怎么写?