问1个select控件添加项的问题，百分百结贴！

fox123871 2011-10-24 10:39:29



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>无标题页</title>

    <script language="javascript" type="text/javascript">



         //移动选中项

        function moveSelectedItem(selectSource,selectTarget) {

            for (var i = 0; i < selectSource.options.length; i++) {

                if (selectSource.options[i].selected)

                {

                    selectTarget.appendChild(selectSource.options[i]);

                }

            }

            selectSource.selectedIndex = -1;

            selectTarget.selectedIndex = -1;

        }



        //左移动到右

        function moveToRight() {

            var selectLeftObj = document.getElementById("selectLeft");

            var selectRightObj = document.getElementById("selectRight");

            moveSelectedItem(selectLeftObj, selectRightObj);

        }

        

    </script>

</head>

<body>

<table id="tableContent" border="1" style="background-color:Fuchsia">

        <tr>

            <td>

                <select id="selectLeft" multiple="multiple" style="height:120px; width:100px">

                    <option value="A">A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                    <option value="D">D</option>

                    <option value="E">E</option>

                    <option value="F">F</option>

                </select>

            </td>

            <td>

                <input type="button" value=">" style="width:50px; height:20px" onclick="moveToRight();" /><br />



            </td>

            <td>

                <select id="selectRight" multiple="multiple" style="height:120px;width:100px"></select>

            </td>

        </tr>

    </table>

</body>

</html>

最近弄个左右选择框，就是左边的选中，添加到右边，可是发现了个问题moveSelectedItem 方法中，
for (var i = 0; i < selectSource.options.length; i++) {
if (selectSource.options[i].selected)
{
selectTarget.appendChild(selectSource.options[i]);
}
}
这段代码添加到目标控件的时候，项会减少，但我遍历了左边的控件，发现都能打印出来，但一添加到别的select控件就会出现减少，这是什么原因呢？请大家看下，多谢！在线等！

...全文

165 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

fox123871 2011-10-25

打赏
举报

木有合适的答案，结贴散分了，不能让围观群众白忙活一场！

fox123871 2011-10-24

打赏
举报

就是左右选择框，选中左边的添加到右边~

MadEric 2011-10-24

打赏
举报

当你选择了一个添加到右边的时候，你再遍历左边的控件，都能打出来？不大可能吧。没太明白你的意思，你现在想要做什么？

fox123871 2011-10-24

打赏
举报

呵呵，多谢几位，现在的问题是为什么我直接appendChild或者add不行，非要new option对象才可以，这是什么原因呢？

fengzheng1987 2011-10-24

打赏
举报

最好在创建新的option时判断右面的下拉列表中是否已经添加过了，不知符合你的需求么？
function moveSelectedItem(selectSource,selectTarget) {
for (var i = 0; i < selectSource.options.length; i++) {
if (selectSource.options[i].selected)
{
if(selectTarget.options.length!=0)
{
for(var j=0;j<selectTarget.options.length;j++)
{
if(selectSource.options[i].text!=selectTarget.options[j].text)
{
selectTarget.add(new Option(selectSource.options[i].value,selectSource.options[i].text));
}
}
}
else
{
selectTarget.add(new Option(selectSource.options[i].value,selectSource.options[i].text));
}
}
}
selectSource.selectedIndex = -1;
selectTarget.selectedIndex = -1;
}

fox123871 2011-10-24

打赏
举报

为什么不能直接添加，而需要先生成1个Option对象，再添加呢？
原理是什么呢？

wolf863292 2011-10-24

打赏
举报



        //复制选中项

        function copeSelectedItem(selectSource,selectTarget) {

            for (var i = 0; i < selectSource.options.length; i++) {

                if (selectSource.options[i].selected)

                {

                    selectTarget.add(new Option(selectSource.options[i].value,selectSource.options[i].text));

                }

            }

            selectSource.selectedIndex = -1;

            selectTarget.selectedIndex = -1;

        }