- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- select{ width: 100px; height: 130px; background-color: #cccccc; } div{
- display: inline-block; } input { display: block; margin: 5px; }
- </style>
- </head>
- <body>
- <h2>
- select example
- </h2>
- <select name="srcity" id="srcity" multiple>
- <option value="1">
- Beijing
- </option>
- <option value="2">
- Tokyo
- </option>
- <option value="3">
- New York
- </option>
- <option value="4">
- Berlin
- </option>
- <option value="5">
- Paris
- </option>
- <option value="6">
- Singapore
- </option>
- </select>
- <div>
- <input type="button" value=">">
- <input type="button" value=">>">
- <input type="button" value="<">
- <input type="button" value="<<">
- </div>
- <select name="tarsrc" id="tarsrc" multiple>
- </select>
- <script src="https://code.jquery.com/jquery-3.4.1.min.js">
- </script>
- <script>
- $(function() {
- $("input[value=\">\"]").click(function() {
- $("#tarsrc").append($("#srcity>option:selected"));
- });
- $("input[value=\">>\"]").click(function() {
- $("#srcity>option").appendTo($("#tarsrc"));
- });
- $("input[value=\"<\"]").click(function() {
- $("#srcity").append($("#tarsrc>option:selected"));
- });
- $("input[value=\"<<\"]").click(function() {
- $("#srcity").append($("#tarsrc>option"));
- });
- });
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3103979.html