首页js穿梭框实现_JS 原生穿梭框代码

js穿梭框实现_JS 原生穿梭框代码

时间: 2024-02-09 21:37:14 浏览: 121

JS原生实现穿梭框可以使用HTML的select标签和一些JavaScript代码实现。以下是一个基本的穿梭框代码示例： ```html <!DOCTYPE html> <html> <head> <title>JS穿梭框</title> <meta charset="utf-8"> </head> <body> <label>选择：</label> <select id="select1" multiple="multiple" style="width:200px;height:200px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <button onclick="moveLeft()">←</button> <button onclick="moveRight()">→</button> <select id="select2" multiple="multiple" style="width:200px;height:200px;"> </select> <script type="text/javascript"> function moveLeft() { var select1 = document.getElementById("select1"); var select2 = document.getElementById("select2"); for (var i = 0; i < select2.options.length; i++) { if (select2.options[i].selected) { select1.appendChild(select2.options[i]); i--; } } } function moveRight() { var select1 = document.getElementById("select1"); var select2 = document.getElementById("select2"); for (var i = 0; i < select1.options.length; i++) { if (select1.options[i].selected) { select2.appendChild(select1.options[i]); i--; } } } </script> </body> </html> ``` 在这个代码中，我们使用了两个select标签，一个是源选项，另一个是目标选项。通过点击左右移动按钮，我们可以将一个或多个选项从一个select标签移动到另一个select标签中。这个代码只是一个基本的示例，你可以根据自己的需要进行修改和扩展。

阅读全文