Javascript 使用 Jquery 在多选框中选择多个值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10052006/
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
Select multiple values in a multiple select box with Jquery
提问by 0x56794E
So I have two multiple select boxes like this
所以我有两个这样的多选框
<select id="foo" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="bar" multiple="multiple">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select>
<a href="#" onclick="select()">Select</a>
What I'm trying to do is that when 'Select' is clicked, any option in "#bar" that has the same value with an option in "#foo" would be selected. In this case Opt 1 and Opt 2 in "#bar" should be selected. I've no idea why my javascript won't work. I know it must be something very simple. I just can't see it. :( So my Javascript function is as followed:
我想要做的是，当单击“选择”时，将选择“#bar”中与“#foo”中的选项具有相同值的任何选项。在这种情况下，应选择“#bar”中的选项 1 和选项 2。我不知道为什么我的 javascript 不起作用。我知道这一定是非常简单的事情。我就是看不出来。:( 所以我的Javascript函数如下：
function select(){
var vals = new Array();
var iter = 0;
$("#foo option").each(function(){
var v = $(this).val();
$('#bar option').each(function(){
if ($(this).val() == v)
{
vals[iter] = v;
iter++;
break;
}
});
});
$("#bar").val(vals);
}
采纳答案by mplungjan
UPDATE after seeing KON's example
看到 KON 的例子后更新
$("#sel").click(function(e) {
e.preventDefault(); // cancel the link itself
$("#bar").val($("#foo").val());
});
<a href="#" id="sel">Select</a>
Older example using each
使用每个的旧示例
$("#sel").click(function(e) { // when link clicked
e.preventDefault();
$("#foo option:selected ").each(function(){
var v = $(this).attr("value"); // first select's value
$('#bar option').each(function(){
if ($(this).attr("value") == v) {
$(this).attr("selected",true); // select if same value
}
});
});
})
回答by kon
Check this out http://jsfiddle.net/NtF8J/
看看这个http://jsfiddle.net/NtF8J/
html
html
<select multiple>
<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>
<select multiple>
<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>
<button> random </button>?
jquery
查询
$(function(){
$(document.body).delegate(
'select:first', 'change', function(){
$('select:not(:first)').val(
$(this).val()
)
}
)
.delegate(
'button', 'click', function(){
$('select').val([1,2,3,4].filter(function(){return!!Math.round(Math.random() * 1)}))
}
)
});
?
