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

2012-09-29

js控制属性为multiple的select出现bugHTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

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

HTML code

<!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，单击<<，选中的便出现在左侧
刚开始运行的还可以，可运行两三次后，浏览器便卡住了，怎么会这样，哪位大大可以帮忙解释下？？？

[解决办法]
遍历写错了
for(var i=0;i<se1.length;i++)

而且你这样子写的话，多选时也不能全部操作成功
[解决办法]
呵呵，是哦，你这样没有改变参数的语句，为何还能在刚开始操作成功呢？？？
[解决办法]
方法做些修正吧，你原有的代码，即使修复成功了，当多选并且为连选时会因为即时删除因为动态改变了索引值的关系，会删一个漏一个

JScript code

<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>

热点排行

JavaScript

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