1

我对 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（如此处）来执行此操作，但无法弄清楚如何按照我上面描述的方式实现。

谢谢你的帮助

4

1 回答 1

1

您在.val()尝试从第一个选择中获取值时丢失了，应该是：

$('#'+$('#selectField1').val()+$('#selectField2').val()).show();
于 2013-09-18T04:40:32.987 回答