js统制属性为multiple的select出现bug-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20337 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>