Pass multiple checkbox values to dropdown lists in jQuery

Question

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.

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

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. Notice how the dropdown lists value change when you click on Adventure or Attractions. http://jsfiddle.net/ajitks/3hdbgw79/

Thank you so much!

Where are these classes cultureInterests, leisureInterests, natureInterests in the HTML. — Senjuti Mahapatra
– Senjuti Mahapatra, Commented Dec 14, 2015 at 6:55
@GuruprasadRao - Thanks for replying. Hope this helps - jsfiddle.net/ajitks/3hdbgw79 — Ajit KS
– Ajit KS, Commented Dec 14, 2015 at 7:04
@Alorika those classes are for different elements. I am not using them for now. hope this fiddle should help. Thanks! — Ajit KS
– Ajit KS, Commented Dec 14, 2015 at 7:06
So what you want is whichever the 2 option is selected that has to be reflected in dropdown list? — Guruprasad J Rao
– Guruprasad J Rao, Commented Dec 14, 2015 at 7:12

Abhay Nikam · Accepted Answer · 2015-12-14 12:49:28Z

1

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.

edited Dec 14, 2015 at 12:49

answered Dec 14, 2015 at 7:39

Abhay Nikam

1821 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Guruprasad J Rao Over a year ago

Good option.. but you need to work on it more.. Try editing that fiddle with your code..

Ajit KS Over a year ago

@AbhayNikam Thanks for the solution. I am unable to figure it out though. Can you please update your code on my fiddle?

Ajit KS Over a year ago

@AbhayNikam This is the closest I have gotten to make this functional. There is a slight problem though. Let's say a user selects Nature and Culture. Then unselects Nature and chooses Adventure. The dropdown will still show Nature and Adventure instead of Culture and Adventure.

Ajit KS Over a year ago

@AbhayNikam Had a friend fix this for me. It uses a Submit button and then dynamically changes the dropdown list data. Thanks for the help. jsfiddle.net/3hdbgw79/5

Ajit KS · Accepted Answer · 2015-12-15 06:54:20Z

1

ANSWER

Check out this FIDDLE. It works!

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

answered Dec 15, 2015 at 6:54

Ajit KS

1712 silver badges14 bronze badges

Collectives™ on Stack Overflow

Pass multiple checkbox values to dropdown lists in jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related