jquery一次移動列表框中的所有項目

我正在工作的一個小jQuery腳本，這裏是鏈接http://jsfiddle.net/RbLVQ/60/我想從一個列表框中移動選定的項目到其他框到其他列表框，但麻煩現在我想移動一次所有項目，意味着我把一個點擊它的所有項目後，「全選」項目/按鈕必須去其他列表框中任何一個可以幫助這個jquery一次移動列表框中的所有項目

的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; 
}

來源

2012-12-22 Milind More

建議還讚賞:) –

你可以像下面這樣做

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

刪除了:selected從選擇$('#lstBox1 option')然後將你的第一個列表框中選擇所有選項

來源

2012-12-22 10:17:28

jquery一次移動列表框中的所有項目

回答

相關問題