[英]Pass multiple checkbox values to dropdown lists in jQuery
I have a checkbox with 5 options. 我有一个包含5个选项的复选框。 Only two of these can be selected.
这些中只能选择两个。 What I am trying to do is pass the value checked to a dropdown list.
我想做的是将检查的值传递给下拉列表。 Since two checkboxes can be selected, I would like their values to be passed to two dropdown lists.
由于可以选择两个复选框,因此我希望将它们的值传递到两个下拉列表中。 Here's what I have so far.
到目前为止,这就是我所拥有的。
HTML HTML
<input class="theme" type="checkbox" name="theme" value="adventure" id="adventure"/><label for="adventure">Adventure</label>
<input class="theme" type="checkbox" name="theme" value="attraction" id="attraction"/><label for="attraction">Attraction</label>
<input class="theme" type="checkbox" name="theme" value="culture" id="culture"/><label for="culture">Culture</label>
<input class="theme" type="checkbox" name="theme" value="leisure" id="leisure"/><label for="leisure">Leisure</label>
<input class="theme" type="checkbox" name="theme" value="nature" id="nature"/><label for="nature">Nature</label>
<select id="list2">
<option value="adventure">Adventure</option>
<option value="attraction">Attractions</option>
<option value="culture">Culture</option>
<option value="leisure">Leisure</option>
<option value="nature">Nature</option>
</select>
<select id="list1">
<option value="adventure">Adventure</option>
<option value="attraction">Attractions</option>
<option value="culture">Culture</option>
<option value="leisure">Leisure</option>
<option value="nature">Nature</option>
</select>
jQuery jQuery的
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="adventure"){
$("#list1").val("adventure");
}
if($(this).attr("value")=="attraction"){
$("#list2").val("attraction");
}
if($(this).attr("value")=="culture"){
$(".cultureInterests").toggle();
}
if($(this).attr("value")=="leisure"){
$(".leisureInterests").toggle();
}
if($(this).attr("value")=="nature"){
$(".natureInterests").toggle();
}
});
As you can see, this method is faulty as the order of selecting a checkbox is beyond my control and I won't be able to tell where to pass the value. 如您所见,此方法是错误的,因为选择复选框的顺序超出了我的控制范围,并且我无法告知将值传递到哪里。 Any help is highly appreciated.
非常感谢您的帮助。
EXAMPLE 例
Here's a JSFiddle of what I am trying to achieve.
这是我要实现的目标的JSFiddle。 Notice how the dropdown lists value change when you click on Adventure or Attractions.
请注意,单击“冒险”或“景点”时,下拉列表的值如何变化。 http://jsfiddle.net/ajitks/3hdbgw79/
http://jsfiddle.net/ajitks/3hdbgw79/
Thank you so much! 非常感谢!
Try something like this: 尝试这样的事情:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
if ($('input[type="checkbox"]:checked').length == 1) {
$('select#list1').val($(this).val());
} else {
$('select#list2').val($(this).val());
}
}else{
$('select#list1').val($('select#list2').val())
$('select#list2').val('')
}
});
if you don't want if else condition we can use Conditional (Ternary) Operator. 如果您不希望其他条件,则可以使用条件(三元)运算符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.