jQuery将MultiSelect值移动到另一个MultiSelect
jQuery将MultiSelect值移动到另一个MultiSelect
提问于 2009-06-29 14:07:51
所以我有一个带有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有没有类似的东西，或者这是一个自定义的代码片段？
回答 9
Stack Overflow用户
回答已采纳
发布于 2009-06-29 14:16:47
有一个名为crossSelect的jquery插件，它似乎可以做你想做的事情。
jQuery没有内置这个插件，你需要找到一个你喜欢的插件并使用它，或者编写你自己的插件。(当然，你不必使用jQuery来编写或使用它，如果你愿意，你可以用纯javascript实现它)
Stack Overflow用户
发布于 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');
});
});Stack Overflow用户
发布于 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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1058517
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号