javascript - jquery根据两个下拉选择更改单个div

Question

我对 jquery 很陌生。我尝试过搜索这个，但找不到任何好的例子。

我正在尝试使用两个下拉列表创建一个选择过程。每个列表都有三个选项。用户将从列表 1 中选择一个选项，然后从列表 2 中选择一个选项。这些选项的组合将显示一个特定的 div。

如果用户随后更改列表选择之一，则 div 会发生更改以反射(reflect)新的组合。

我尝试过至少让其中一种组合起作用，但不行。到目前为止我已经:

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