- 最开始想每个方法中用一个循环搞定,后来发现循环删除后。options的索引和集合就发生了变化,删除就不成功。有时候还出现selected为空的现象,2个循环就over了;
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>addMulitOptions.html</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <script type="text/javascript">
- function moveLeft() {
- var lBox = document.getElementById("leftBox");
- var rBox = document.getElementById("rightBox");
- var count = 0;;
- for (var i = 0, len = lBox.length; i < len; i++) {
- if (lBox[i].selected) {
- rBox.options.add(new Option(lBox.options[i].text, lBox[i].value));
- count++;
- }
- }
- for (var i = 0; i < count; i++) {
- lBox.remove(lBox.selectedIndex);
- }
- }
- function moveRight() {
- var lBox = document.getElementById("leftBox");
- var rBox = document.getElementById("rightBox");
- var count = 0;;
- for (var i = 0, len = rBox.length; i < len; i++) {
- if (rBox[i].selected) {
- lBox.options.add(new Option(rBox.options[i].text, rBox[i].value));
- count++;
- }
- }
- for (var i = 0; i < count; i++) {
- rBox.remove(rBox.selectedIndex);
- }
- }
- </script>
- </head>
- <body>
- <select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">
- <option value="1">a</option>
- <option value="2">b</option>
- <option value="3">c</option>
- <option value="4">d</option>
- </select>
- <input type="button" value=">>" οnclick="moveLeft()"/>
- <input type="button" value="<<" οnclick="moveRight()"/>
- <select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">
- <option value="11">A</option>
- <option value="22">B</option>
- <option value="33">C</option>
- <option value="44">D</option>
- </select>
- </body>
- </html>
JavaScript js 左右移动下拉列表选项
最新推荐文章于 2021-08-03 23:09:11 发布