Javascript 基于选择选项显示div？

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

有两个选择元素

<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

第二个select元素为空，直到您从第一个select元素中进行选择，然后您可以从第二个元素中进行选择，并且它显示该值的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>

---

你们能帮我做这个吗？

我会给你们的选择一些ID，为了这个例子，让我们分别使用sel1和sel2。我也会将选项中的值更改为一个数字，否则需要对值或正则表达式进行一些微调：

$("#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();
});

---

小提琴：我个人的建议是：

/* a more precise selector would be useful, whether by specifying an ancestor or
   by adding an id to the select elements. Binding the change event-handler: */
$('select').change(function(){
    /* creating the id of the relevant element to show using map(),
       to the string 'value-' plus whatever the map(), and get(), methods return: */
    $('#value-' + $('select option:selected').map(function(){
        // removing all non-numeric characters, returning the numbers:
        return this.value.replace(/\D+/g,'');
    /* forming an array with get(),
       joining the array elements together with hyphens, with join(),
       showing the element whose id matches the created string
       selecting siblings, removing the select elements from that selection,
       and hiding them: */
    }).get().join('-')).show().siblings().not('select').hide();
/* triggering the change event so the above always only shows/hides
   the relevant elements on loading the DOM: */
}).change();

根据设计，这不会切换第二个select元素的显示，因为我真的看不到需要，因为第一个select将始终有一个selected，selected，选项，即使只是默认情况下，否则，即使要选择已选择的选项，也需要选择一个未选择的选项来启动select的更改事件

参考资料：

. . . . . . . 试一试

---

演示：

这可以通过一些非常简单的jQuery轻松完成。我们需要查看到目前为止您已经编写并尝试了哪些JS/jQuery代码。但是，如果在sel2被更改后第二次更改sel1，这将不起作用。@Danny-已更新，已修复。

var $divs = $('div[id^="value-"]').hide();

var $sel1 = $('#sel1').one('change', function(){
    $sel2.prop('disabled', false);
});
var $sel2 = $('#sel2');

$sel1.add($sel2).change(function(){
    var p1 = $sel1.val().replace(/\D+/, '');
    var p2 = $sel2.val().replace(/\D+/, '');
    $divs.hide();
    $('#value-' + p1 + '-' + p2).show();
})