[英]Jquery moving all items in listbox at once
我正在處理一個小的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;
}
你可以這樣
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
,然后它將在第一個列表框中選擇所有選項
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.