js控制属性为multiple的select出现bug


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
</style>
</head>
    <body>
        <form name="form">
            <select multiple="multiple" name="se1" style="height:100px;width:50px;">
                <option value='2001'>2001</option>
                <option value='2002'>2002</option>
                <option value='2003'>2003</option>
                <option value='2004'>2004</option>
                <option value='2005'>2005</option>
                <option value='2006'>2006</option>
            </select>
            <input type="button" value=">>" onclick="add()"/>
            <input type="button" value="<<" onclick="plu()"/>
            <select multiple="multiple" name="se2" style="height:100px;width:50px;">   
            </select>
            <script type="text/javascript">
            var se1 = document.form.se1;
            var se2 = document.form.se2;
            function add() {
                for(var i=0;i<se1.length; ) {
                    if(se1[i].selected) {
                        var opt = document.createElement('option');
                        opt.value = se1[i].value;
                        var node = document.createTextNode(se1[i].value);
                        opt.appendChild(node);
                        se2.appendChild(opt);
                        se1.removeChild(se1[i]);
                    }
                }
            }
            function plu() {
                for(var i=0;i<se2.length; ) {
                    if(se2[i].selected) {
                        var opt = document.createElement('option');
                        opt.value = se2[i].value;
                        var node = document.createTextNode(se2[i].value);
                        opt.appendChild(node);
                        se1.appendChild(opt);
                        se2.removeChild(se2[i]);
                    }
                }
            }
            </script>
        </form>
    </body>
</html>
选中左边的option，单击>>，选中的便出现在右侧的select中；选中右侧的option，单击<<，选中的便出现在左侧
刚开始运行的还可以，可运行两三次后，浏览器便卡住了，怎么会这样，哪位大大可以帮忙解释下？？？

解决方案 »

  1.   

    遍历写错了
    for(var i=0;i<se1.length;i++)而且你这样子写的话，多选时也不能全部操作成功
      

  2.   

    方法做些修正吧，你原有的代码，即使修复成功了，当多选并且为连选时会因为即时删除因为动态改变了索引值的关系，会删一个漏一个
    <script type="text/javascript">
                var se1 = document.form.se1;
                var se2 = document.form.se2;
                var arr=new Array();
                function add() {
                    for(var i=0;i<se1.length;i++) {
                        if(se1[i].selected) {
                            se2.options.add(new Option(se1[i].text, se1[i].value));
                            arr.push(se1[i]);                    }
                    }
                    refresh(se1);
                }
                function refresh(o){
                    for(var i=0;i<arr.length;i++) {
                        o.removeChild(arr[i]);
                    }
                    arr.length=0;
                }
                function plu() {
                    for(var i=0;i<se2.length;i++) {
                        if(se2[i].selected) {
                            se1.options.add(new Option(se2[i].text, se2[i].value));
                            arr.push(se2[i]);
                        }
                    }
                    refresh(se2);
                }
                </script>