所以我有一个带有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有没有类似的东西,或者这是一个自定义的代码片段?
发布于 2011-12-02 21:18:53
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
发布于 2013-04-03 11:04:58
尝试以下内容(取自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>
发布于 2013-09-24 18:07:47
我也有同样的问题,但我找到了一个解决方法
<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的选择器
https://stackoverflow.com/questions/1058517
复制相似问题