[英]Jquery moving all items in listbox at once
I am working on a small jquery script, here is link http://jsfiddle.net/RbLVQ/60/ where I wanted to move selected items from one listbox to other box to other listbox, but trouble is now I want to move all items at once , means i will put an "Select All" item / button after clicking on it all items must go to other listbox can any one help with this 我正在处理一个小的jquery脚本,这是链接http://jsfiddle.net/RbLVQ/60/ ,在这里我想将选定的项目从一个列表框移动到另一个列表框再移动到另一个列表框,但是麻烦了,现在我想将所有列表框都移动项目一次 ,这意味着我将在单击它后放一个“全选”项目/按钮,所有项目必须转到其他列表框,对此有何帮助?
JavaScript 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 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>
and Some CSS 和一些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;
}
You can do it like this 你可以这样
HTML: HTML:
<input type='button' id='btnRightAll' value =' >> '/>
JavaScript: 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();
});
Removed the :selected
from the selector $('#lstBox1 option')
which then will select all options in your 1st listbox 从选择器
$('#lstBox1 option')
中删除了:selected
,然后它将在第一个列表框中选择所有选项
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.