帮忙解决一下一个bug..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>两个下拉列表框组成的互选框</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"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
function moveSingleItem(sourceSelect, targetSelect) {
//selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。注释：若允许多重选择，则仅会返回第一个被选选项的索引号。 if(sourceSelect.mySelectedIndex == -1) { //如果没有选择任何项目则返回
return;
}

if(sourceSelect.options[0].text == "无") {
return;
} if(targetSelect.options[0].text == "无") {
targetSelect.options.remove(0);
}

var nowSelectedText = sourceSelect.options[sourceSelect.selectedIndex].text;
targetSelect.options.add(new Option(nowSelectedText));//这里Option为什么要大写?
sourceSelect.options.remove(sourceSelect.selectedIndex); if(sourceSelect.options.length == 0) {
sourceSelect.options.add(new Option("无"));

}
} 

function moveAllItems(sourceSelect, targetSelect) {
//alert("ok");
if(sourceSelect.options[0].text == "无") { //如果没有选择任何项目则返回
return;
}

if(targetSelect.options[0].text == "无") {
targetSelect.options.remove(0);
}

var selectLength = sourceSelect.length;
//alert(selectLength);
for(var i = 0; i < selectLength; i++) {
var nowSelectedText = sourceSelect.options[i].text;
targetSelect.options.add(new Option(nowSelectedText));
}

//alert("ok");
while(( k = sourceSelect.length - 1)>=0) {
if(sourceSelect.options[0].text == "无") {
break;
}
sourceSelect.options.remove(k);

if (sourceSelect.options.length == 0) {
sourceSelect.options.add(new Option("无"));
}        
} 
} </script> </head> <body>
<form>
<table>
<tr>
<td>
<select name="mySelectLeft" id="mySelectLeft" multiple="multiple"
size="5" style="width: 50px; height: 150px">
<option>
苹果
</option>
<option>
橘子
</option>
<option>
香蕉
</option>
<option>
西瓜
</option>
<option>
李子
</option>
</select>
</td>
<td>
<input type="button" value="&gt;" 
onclick="moveSingleItem(mySelectLeft, mySelectRight)">
<br>
<input type="button" value="&gt;&gt;" 
onclick="moveAllItems(mySelectLeft, mySelectRight)"> <br>
<input type="button" value="&lt;"
onclick="moveSingleItem(mySelectRight, mySelectLeft)">
<br>
<input type="button" value="&lt;&lt;"
onclick="moveAllItems(mySelectRight, mySelectLeft)">
</td>
<td>
<select name="mySelectRight" id="mySelectRight"
multiple="multiple" size="5" style="width: 50px; height: 150px">
<option>
无
</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
1 一开始选中某一个点单箭头可以,但是直接点单箭头就出错了.
2 顺便问一下new Option这为什么非要大写?

解决方案 »

  1.   

    1,没有选中项就直接点箭头,JS无法找到你要移动的对象和值,当然会出错
    2,JS对函数,对象的名称是区分大小写的,新建对象如new Array等JS内置对象时首字母要大写
      

  2.   

    Option是内置的类，必须大写
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>两个下拉列表框组成的互选框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script>
    function moveSingleItem(source, target){
    var option, selected = [], options = source.options, i = 0, l = options.length;
    for (; i < l; i++) 
    if (options[i].selected) selected.push(options[i]);
    while (option = selected.shift())
    option.selected = false, target.appendChild(option);
    }

    function moveAllItems(source, target){
    var options = source.options, i = 0, l = options.length;
    for (; i < l; i++) 
    target.appendChild(options[0]);
    }
    </script>
    </head>
    <body>
    <form>
    <table>
    <tr>
    <td>
    <select id="mySelectLeft" multiple="multiple" size="5" style="width: 50px; height: 150px">
    <option>苹果</option>
    <option>橘子</option>
    <option>香蕉</option>
    <option>西瓜</option>
    <option>李子</option>
    </select>
    </td>
    <td><input type="button" value="&gt;" onclick="moveSingleItem(mySelectLeft, mySelectRight)">
    <br>
    <input type="button" value="&gt;&gt;" onclick="moveAllItems(mySelectLeft, mySelectRight)">
    <br>
    <input type="button" value="&lt;" onclick="moveSingleItem(mySelectRight, mySelectLeft)">
    <br>
    <input type="button" value="&lt;&lt;" onclick="moveAllItems(mySelectRight, mySelectLeft)">
    </td><td>
    <select id="mySelectRight" multiple="multiple" size="5" style="width: 50px; height: 150px">
    </select>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
      

  3.   

    if(sourceSelect.selectedIndex == -1){return;}
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title>两个下拉列表框组成的互选框</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">            <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
            <script>
                function moveSingleItem(sourceSelect, targetSelect) {
                //selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。注释：若允许多重选择，则仅会返回第一个被选选项的索引号。                if(sourceSelect.selectedIndex == -1) { //如果没有选择任何项目则返回
                        return;
                    }
                    
                    if(sourceSelect.options[0].text == "无") {
                        return;
                    }                if(targetSelect.options[0].text == "无") {
                        targetSelect.options.remove(0);    
                    }                
                        
                    var nowSelectedText = sourceSelect.options[sourceSelect.selectedIndex].text;
                    targetSelect.options.add(new Option(nowSelectedText));//这里Option为什么要大写?
                    sourceSelect.options.remove(sourceSelect.selectedIndex);                if(sourceSelect.options.length == 0) {
                        sourceSelect.options.add(new Option("无"));
                        
                    }
                } 
                
                function moveAllItems(sourceSelect, targetSelect) {
    //alert("ok");
                    if(sourceSelect.options[0].text == "无") { //如果没有选择任何项目则返回
                        return;
                    }
                    
                    if(targetSelect.options[0].text == "无") {
                        targetSelect.options.remove(0);
                    }
                    
                    var selectLength = sourceSelect.length;
    //alert(selectLength);
                    for(var i = 0; i < selectLength; i++) {
                        var nowSelectedText = sourceSelect.options[i].text;
                        targetSelect.options.add(new Option(nowSelectedText));
                    }
                    
    //alert("ok");
                    while(( k = sourceSelect.length - 1)>=0) {
                        if(sourceSelect.options[0].text == "无") {
                            break;
                        }                    
                        sourceSelect.options.remove(k);
                        
                        if (sourceSelect.options.length == 0) {
                            sourceSelect.options.add(new Option("无"));
                        }                   
                    } 
                }        </script>    </head>    <body>
            <form>
                <table>
                    <tr>
                        <td>
                            <select name="mySelectLeft" id="mySelectLeft" multiple="multiple"
                                size="5" style="width: 50px; height: 150px">
                                <option>
                                    苹果
                                </option>
                                <option>
                                    橘子
                                </option>
                                <option>
                                    香蕉
                                </option>
                                <option>
                                    西瓜
                                </option>
                                <option>
                                    李子
                                </option>
                            </select>
                        </td>
                        <td>
                            <input type="button" value="&gt;" 
                                onclick="moveSingleItem(mySelectLeft, mySelectRight)">
                            <br>
                            <input type="button" value="&gt;&gt;" 
                                onclick="moveAllItems(mySelectLeft, mySelectRight)">                        <br>
                            <input type="button" value="&lt;"
                                onclick="moveSingleItem(mySelectRight, mySelectLeft)">
                            <br>
                            <input type="button" value="&lt;&lt;"
                                onclick="moveAllItems(mySelectRight, mySelectLeft)">
                        </td>
                        <td>
                            <select name="mySelectRight" id="mySelectRight"
                                multiple="multiple" size="5" style="width: 50px; height: 150px">
                                <option>
                                    无
                                </option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>