title: Pass multiple checkbox values to dropdown lists in jQuery
body: <p>I have a checkbox with 5 options. 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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input class="theme" type="checkbox" name="theme" value="adventure" id="adventure"/&gt;&lt;label for="adventure"&gt;Adventure&lt;/label&gt;
  &lt;input class="theme" type="checkbox" name="theme" value="attraction" id="attraction"/&gt;&lt;label for="attraction"&gt;Attraction&lt;/label&gt;
  &lt;input class="theme" type="checkbox" name="theme" value="culture" id="culture"/&gt;&lt;label for="culture"&gt;Culture&lt;/label&gt;
  &lt;input class="theme" type="checkbox" name="theme" value="leisure" id="leisure"/&gt;&lt;label for="leisure"&gt;Leisure&lt;/label&gt;
  &lt;input class="theme" type="checkbox" name="theme" value="nature" id="nature"/&gt;&lt;label for="nature"&gt;Nature&lt;/label&gt;
  
  &lt;select id="list2"&gt;
  &lt;option value="adventure"&gt;Adventure&lt;/option&gt;
  &lt;option value="attraction"&gt;Attractions&lt;/option&gt;
  &lt;option value="culture"&gt;Culture&lt;/option&gt;
  &lt;option value="leisure"&gt;Leisure&lt;/option&gt;
  &lt;option value="nature"&gt;Nature&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="list1"&gt;
  &lt;option value="adventure"&gt;Adventure&lt;/option&gt;
  &lt;option value="attraction"&gt;Attractions&lt;/option&gt;
  &lt;option value="culture"&gt;Culture&lt;/option&gt;
  &lt;option value="leisure"&gt;Leisure&lt;/option&gt;
  &lt;option value="nature"&gt;Nature&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(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();
      }
  });
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>EXAMPLE</strong></p>
  
  <blockquote>
    <p>Here's a JSFiddle of what I am trying to achieve. Notice how the dropdown lists value change when you click on Adventure or Attractions.
    <a href="http://jsfiddle.net/ajitks/3hdbgw79/" rel="nofollow">http://jsfiddle.net/ajitks/3hdbgw79/</a></p>
  </blockquote>
  
  <p>Thank you so much!</p>