將多個復選框值傳遞到jQuery中的下拉列表

Question

我有一個包含5個選項的復選框。 這些中只能選擇兩個。 我想做的是將檢查的值傳遞給下拉列表。 由於可以選擇兩個復選框，因此我希望將它們的值傳遞到兩個下拉列表中。 到目前為止，這就是我所擁有的。

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的

$(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();
    }
});

如您所見，此方法是錯誤的，因為選擇復選框的順序超出了我的控制范圍，並且我無法告知將值傳遞到哪里。 非常感謝您的幫助。

例

這是我要實現的目標的JSFiddle。 請注意，單擊“冒險”或“景點”時，下拉列表的值如何變化。 http://jsfiddle.net/ajitks/3hdbgw79/

非常感謝！

Answer 1

嘗試這樣的事情：

$('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('')
  }
});

如果您不希望其他條件，則可以使用條件（三元）運算符。

Answer 2

回答

看看這個FIDDLE 。 有用！

$('.next').click(function() {
    var i=1;
    $('input[type="checkbox"]:checked').each(function(){
    $('select#list'+i).val($(this).val());
    i++;
});