CODEWITHSUNDEEP
javascriptjquery
user1986005
user1986005

Reputation: 23

jquery change single div based on two dropdown selections

I'm quite new to jquery. I've tried searching for this but can't find any good examples.

I'm trying to create a selection process using two dropdown lists. Each list has three options. The user will select an option from list 1, then an option from list 2. The combination of these options will then make a particular div show.

If the user then changes one of the list selections, the div changes to reflect the new combination.

I've tried with just at least getting one of the combinations to work, but can't. So far I have:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.boxy').hide();
    $('#option1option3').show();
    $("#selectField1, #selectField2").on("change", function(){
        $('.boxy').hide();
        $('#'+$('#selectField1')+$('#selectField2').val()).show();
    });
});
</script>

<select id="selectField1">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
</select>

<select id="selectField2">
    <option value="option3">option3</option>
    <option value="option4">option4</option>
</select>

<div id="option1option3" class="boxy">Content 1 and 3</div>
<div id="option1option4" class="boxy">Content 1 and 4</div>
<div id="option2option3" class="boxy">Content 2 and 3</div>
<div id="option2option4" class="boxy">Content 2 and 4</div>

I can do this using a single list and div (like here), but can't figure out how to implement as I've described above.

Thanks for any help

Upvotes: 1

Views: 1050

Answers (1)

omma2289
omma2289

Reputation: 54639

You're missing .val() while trying to get the value from the first select, should be:

$('#'+$('#selectField1').val()+$('#selectField2').val()).show();

Upvotes: 1

Related Questions