所以我有一个带有x值的MultiSelect框,我需要能够移动到另一个MultiSelect框,反之亦然.
<select class="boxa" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="boxb" multiple="multiple">
</select>
需要在按钮单击时将boxa的全部或一个值移动到boxb,还可以将值从boxb移回boxa.
jQuery是否有这样的东西,或者这是一个自定义的代码片段？
Yas*_*tha 68
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
Sil*_*mer 10
请尝试以下内容(摘自http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html)
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
</script>
<style type="text/css">
a {
display: block;
border: 1px solid #aaa;
text-decoration: none;
background-color: #fafafa;
color: #123456;
margin: 2px;
clear:both;
}
div {
float:left;
text-align: center;
margin: 10px;
}
select {
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div>
<select multiple id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<a href="#" id="add">add >></a>
</div>
<div>
<select multiple id="select2"></select>
<a href="#" id="remove"><< remove</a>
</div>
</body>
</html>
小智 8
我有同样的问题,但我发现了一个方法
<div>
<select multiple id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div>
<select multiple id="select2"></select>
</div>
jQuery的
$('#select1').click(function () {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#select2').click(function () {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
如果想要一个按钮,在这里添加一个添加>>和jquery点击选择器
示例http://jsfiddle.net/diffintact/GJJQw/3/
有一个名为crossSelect的jquery插件似乎可以做你想要的.
jQuery没有内置的,你需要找到你喜欢的插件并使用它,或者编写自己的插件.(当然,你不具备使用jQuery编写或使用它,如果你喜欢,你可以实现它的纯JavaScript)
| 归档时间： |
|
| 查看次数： |
28804 次 |
| 最近记录： |