Question

我对jquery很新。我试过寻找这个，但找不到任何好的例子。

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

如果用户随后更改了其中一个列表选择，则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();

jquery根据两个下拉选项更改单个div

1 个答案: