jQuery 将 MultiSelect 值移动到另一个 MultiSelect
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1058517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery moving MultiSelect values to another MultiSelect
提问by Phill Pafford
So I have a MultiSelect box with x values which I need the ability to move to another MultiSelect box and vise versa.
所以我有一个带有 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>
Need to move all or one of the values of boxa to boxb on a button click, also with the ability to move the values back from boxb to boxa.
需要在单击按钮时将 boxa 的所有或其中一个值移动到 boxb，还可以将值从 boxb 移回 boxa。
Does jQuery have anything like this or is this a custom snippet of code?
jQuery 有没有这样的东西，或者这是一个自定义的代码片段？
采纳答案by Tom Ritter
There's a jquery plugin called crossSelectwhich seems to do what you want.
有一个名为crossSelect的 jquery 插件似乎可以满足您的需求。
jQuery doesn't have this built in, you would need to either find a plugin you like and use that, or write your own. (And of course you don't haveto use jQuery to write or use it, you could implement it in pure javascript if you like)
jQuery 没有内置这个插件，你需要找到一个你喜欢的插件并使用它，或者编写你自己的插件。（当然，你不具备使用jQuery写或使用它，如果你喜欢，你可以实现它的纯JavaScript）
回答by Yasitha
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
回答by Silas Palmer
Try the following (taken from http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html)
尝试以下操作（取自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>
回答by jai
I had same problem but i found out a way around it
我有同样的问题，但我找到了解决方法
<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');
});
if want a button add a add >> and jquery click selector here
如果想要一个按钮添加一个添加 >> 和 jquery 点击选择器这里
回答by Vijayakrishna
$('#boxa option').appendTo('#boxb');
回答by Laxman More
If you are fine with plugin, this plugin does work well.
如果你对插件很好，这个插件运行良好。
回答by Pierre de LESPINAY
If using Bootstrap, I found bootstrap-duallistboxquite handy.
如果使用 Bootstrap，我发现bootstrap-duallistbox非常方便。
- Filterable
- Responsive
- Localizable
- Highly customizable
- Seems well maintained
- 可过滤
- 反应灵敏
- 可本地化
- 高度可定制
- 看起来保养得很好
回答by Santosh
Here goes my html code
这是我的 html 代码
<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>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<a href="#" id="add">add > ></a>
</div>
<div>
<select multiple id="select2"></select>
<a href="#" id="remove">remove < <</a>
</div>
and Javascript code
和 Javascript 代码
$("#add").click(function(){
$("#select1 option:selected").remove().appendTo($("#select2"));
})
$("#remove").click(function(){
$("#select2 option:selected").remove().appendTo($("#select1"));
})
Make sure you imported jquery.jsfile.
确保您导入了jquery.js文件。
