<head>
<meta charset="UTF-8">
<title>左右选中</title>
<style>
input[type='button'] {
width: 50px;
}
</style>
<script>
//获取左右两个select 框的对象
//向右边的第一个按钮的功能
function toRight2() {
var selectLeftObj = document.getElementById("left");
var selectRightObj = document.getElementById("right");
var arr = selectLeftObj.options;
//遍历数组
/*for(var i = 0; i < arr.length; i++) {
if(arr[i].selected) {
selectRightObj.appendChild(arr[i]);
i--;
}
}*/
//此时打开页面会卡死 上面的不会
for(var i = 0; i < arr.length; ) {
if(arr[i].selected) {
selectRightObj.appendChild(arr[i]);
}
}
}
//向右边第三个按钮的功能
function toRight3() {
var selectLeftObj = document.getElementById("left");
var selectRightObj = document.getElementById("right");
var arr = selectLeftObj.options;
for(var i = 0; i < arr.length;) {
selectRightObj.appendChild(arr[i]);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="left" multiple="ture" style="width:100px" size="10">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1" onclick="toRight1()"><br>
<input type="button" value=">>" id="toRight2" onclick="toRight2()"><br>
<input type="button" value=">>>" id="toRight3" onclick="toRight3()"><br><br>
<input type="button" value="<" id="toLeft1" onclick="toLeft1()"><br>
<input type="button" value="<<" id="toLeft2" onclick="toLeft2()"><br>
<input type="button" value="<<<" id="toLeft3" onclick="toLeft3()">
</td>
<td>
<select id="right" multiple="true" style="width:100px" size="10">
</select>
</td>
</tr>
</table>
</body>
方便浏览代码 我把html标签去掉了 ，想请问大神的是 上方 function toRight2（）
中代码执行的问题 加注释的部分可以顺利执行，但是根据function toRight3（）中的代码 类比到2时 发现页面会卡死，想不通是为什么。求大神给解释一下啊。。
function toRight3() {
var selectLeftObj = document.getElementById("left");
var selectRightObj = document.getElementById("right");
var arr = selectLeftObj.options;//这个是特殊的DOM数组，你下面append到其他对象后，这个arr DOM数组长度会自动减少，所以不会死循环，for中不需要i++，如果你执行i++会遍历不完所有的option，只能一般，因为arr.length没append一次就-1了
for(var i = 0; i < arr.length;) {
selectRightObj.appendChild(arr[i]);
}
//实际for等于于 while(arr.length>0) selectRightObj.appendChild(arr[0]);
}
var arr = selectLeftObj.options;
//遍历数组
/*for(var i = 0; i < arr.length; i++) {
if(arr[i].selected) {
selectRightObj.appendChild(arr[i]);//这里append后arr.length会-1.所以下面的i得-1，从原来的位置遍历，要不会遍历不全所有被选中的option
i--;
}
}*/
//此时打开页面会卡死 上面的不会
for(var i = 0; i < arr.length; ) {
if(arr[i].selected) {
selectRightObj.appendChild(arr[i]);////这个你判断了selected属性，如果不是所有的option都选择了，那么就会存在i<arr.length的情况并且一直存在，所以死循环了
}
}
死循环了，i永远等于0
//此时打开页面会卡死 上面的不会
for(var i = 0; i < arr.length; ) {
if(arr[i].selected) {
selectRightObj.appendChild(arr[i]);
}
}
没给加上i++;应该跟第一个循环一样结构