您的位置：首页 > Web前端 > JavaScript

JavaScript js 左右移动下拉列表选项

2010-07-20 12:16 776 查看

最开始想每个方法中用一个循环搞定，后来发现循环删除后。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=">>" onclick="moveLeft()"/>
    <input type="button" value="<<" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航