javascript - 根据选择选项显示 div？

Question

我在尝试创建其背后的代码时遇到问题。我正在尝试根据选择选项显示/隐藏 div，总共有 4 个选项。

有2个select元素

<select>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
</select>

<select>
    <option value="value3">Value 3</option>
    <option value="value4">Value 4</option>
</select>

组合将是

值1-值3 值1-值4

值2-值3 值2-值4

第二个选择元素是空的，直到您从第一个选择元素中选择，然后您可以从第二个元素中选择，它显示该值的 div。

div 应该是。

<div id="value-1-3">value1-value3</div>
<div id="value-1-4">value1-value4</div>

<div id="value-2-3">value2-value3</div>
<div id="value-2-4">value2-value4</div>

你们能帮我做这个吗？

Answer 1

我会给你的选择一些ID，为了这个例子，让我们分别使用sel1和sel2。我还会将 option 中的 value 更改为一个数字，否则需要对 value 或正则表达式进行一些修整:

$("#sel1").change(function() {
    $("#sel2").prop("disabled", false); //enable the second select
    $("#sel2").change(); //trigger a change event on select2
});

$("#sel2").change(function() {
    //Gather your select values
    var sel1Value = $("#sel1").val();
    var sel2Value = this.value;

    //Concatenate a selector and show it!
    $("div").hide(); //hide previously shown divs
    $("#value-" + sel1Value + "-" + sel2Value).show();
});

fiddle :http://jsfiddle.net/b7Q8s/18/