原型:如何将选定的选项从一个选项移动到另一个选择?

时间:2010-12-07 16:04:42

标签: select prototypejs options

使用原型1.6如何从一个选择中删除所有选定的选项并将它们附加到另一个选项?我想我应该补充一点,当它们出现在目标中时,不应该选择它们......

1 个答案:

答案 0 :(得分:1)

我找到了答案,其中只涉及使用“普通jane”javascript获取所选选项并取消选择它们。这使用原型1.6并且工作正常。

<head>

    <script type="text/javascript" src="prototype.js"></script>

</head>

<body>

    <h1>Hello World</h2>

    <div style="border:solid 1px black">

        <select id="leftSelect" multiple="multiple" size="3">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>

        <span class="test">
            <button id="moveRightBtn">&gt;&gt;</button><br/>
            <button id="moveLeftBtn">&lt;&lt;</button>
        </span>

        <select id="rightSelect" multiple="multiple" size="3">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>

    </div>

    <script type="text/javascript">

        document.observe("dom:loaded", function()
        {
            Event.observe("moveRightBtn", "click", function()
            {
                move($("leftSelect"), $("rightSelect"));
            });

            Event.observe("moveLeftBtn", "click",  function()
            {
                move($("rightSelect"), $("leftSelect"));
            });
        });

        function move(sourceSelect, targetSelect)
        {
        var options = sourceSelect.select("option");

        options.each(function(item)
        {
           if(item.selected)
           {
              item.selected = false;
              targetSelect.appendChild(item.remove());
           }
        });
        }

    </script>

</body>