Jquery一次移动列表框中的所有项目答案

【问题标题】：Jquery moving all items in listbox at onceJquery一次移动列表框中的所有项目
【发布时间】：2012-12-22 10:12:17
【问题描述】：

我正在编写一个小型 jquery 脚本，这里是链接 http://jsfiddle.net/RbLVQ/60/，我想将所选项目从一个列表框移动到另一个列表框到另一个列表框，但问题是现在我想一次移动 所有项目，意味着我会在点击后放置一个“全选”项目/按钮，所有项目都必须转到其他列表框，任何人都可以帮助解决这个问题

JavaScript

$(document).ready(function() {
    $('#btnRight').click(function(e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });

    $('#btnLeft').click(function(e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
});

HTML

<table style='width:370px;'>
    <tr>
        <td style='width:160px;'>
            <b>Group 1:</b><br/>
           <select multiple="multiple" id='lstBox1'>
              <option value="ajax">Ajax</option>
              <option value="jquery">jQuery</option>
              <option value="javascript">JavaScript</option>
              <option value="mootool">MooTools</option>
              <option value="prototype">Prototype</option>
              <option value="dojo">Dojo</option>
        </select>
    </td>
    <td style='width:50px;text-align:center;vertical-align:middle;'>
        <input type='button' id='btnRight' value ='  >  '/>
        <br/><input type='button' id='btnLeft' value ='  <  '/>
    </td>
    <td style='width:160px;'>
        <b>Group 2: </b><br/>
        <select multiple="multiple" id='lstBox2'>
          <option value="asp">ASP.NET</option>
          <option value="c#">C#</option>
          <option value="vb">VB.NET</option>
          <option value="java">Java</option>
          <option value="php">PHP</option>
          <option value="python">Python</option>  
        </select>
    </td>
</tr>
</table>

还有一些 CSS

body
{
    padding:10px;
    font-family:verdana;
    font-size:8pt;
}

select
{
    font-family:verdana;
    font-size:8pt;
    width : 150px;
    height:100px;
}
input
{
    text-align: center;
    v-align: middle;
}

【问题讨论】：

建议也赞赏:)

标签： jquery listbox

【解决方案1】：

你可以这样做

Your updated fiddle

HTML：

<input type='button' id='btnRightAll' value ='  >>  '/>

JavaScript：

$('#btnRightAll').click(function(e) {
    var selectedOpts = $('#lstBox1 option');
    if (selectedOpts.length == 0) {
        alert("Nothing to move.");
        e.preventDefault();
    }

    $('#lstBox2').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
});

从选择器 $('#lstBox1 option') 中删除了 :selected，然后它将选择第一个列表框中的所有选项

【讨论】：