jquery change single div на основе двух выпадающих меню

Question

Я довольно новичок в jquery. Я пробовал искать это, но не могу найти хороших примеров.

Я пытаюсь создать процесс выбора, используя два раскрывающихся списка. Каждый список имеет три варианта. Пользователь выберет опцию из списка 1, затем вариант из списка 2. Затем комбинация этих параметров сделает отдельное шоу.

Если пользователь затем меняет один из вариантов списка, div изменяется, чтобы отразить новую комбинацию.

Я попытался хотя бы с помощью одной из комбинаций работать, но не могу. До сих пор у меня есть:

<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> 

Я могу сделать это с помощью одного списка и DIV (как here), но не могу понять, как реализовать, как я описал выше.

Спасибо за любую помощь

Answer 1

Вы отсутствующий .val() при попытке получить значение из первого выбора, должно быть:

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