下拉框移动 jquery

80437916 2019-12-22

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>下拉框移动</title>    <script src="js/jquery-3.2.1.min.js"></script>    <style>        .all{            width: 700px;            height:500px;        }        .left{            margin-left: 50px;            margin-top: 100px;            width: 200px;            height:100px;            float: left;        }        .mod{            margin-top: 100px;            margin-left: 100px;            width: 100px;            height: 100px;            float: left;        }        .right{            margin-top: 100px;            width:200px;            height:100px;            float: right;        }        select{            width:200px;            height:100px;        }    </style>    <script>        $(function () {            $(".leftbtn").click(function () {                $(".rightsel").append($(".leftsel > option:selected"));            });            $(".reghtbtn").click(function () {                $(".rightsel > option:selected").appendTo($(".leftsel"));            });        });    </script></head><body><div class="all"><div class="left">    <select multiple="multiple" class="leftsel">        <option>山东</option>        <option>山西</option>        <option>陕西</option>        <option>北京</option>        <option>上海</option>    </select></div><div class="mod">    <br>    <input type="button" value="-->" class="leftbtn"><br><br><br>    <input type="button" value="<--" class="reghtbtn"></div><div class="right">    <select class="rightsel" multiple="multiple">        <option>江苏</option>    </select></div></div></body></html>

相关推荐