根据选择选项显示div？答案

【问题标题】：Show div's based on a select option?根据选择选项显示div？
【发布时间】：2013-10-10 05:37:33
【问题描述】：

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

有 2 个选择元素

<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>

你们能帮我做这件事吗？

【问题讨论】：

这很容易用一些非常简单的 jQuery 来完成。我们需要看看到目前为止您编写和尝试过的 JS/jQuery 代码。

标签： javascript jquery html css

【解决方案1】：

我会给你的selects 一些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();
});

小提琴：http://jsfiddle.net/b7Q8s/18/

【讨论】：

但是当您在更改 #sel2 后再次更改 #sel1 时，这将不起作用。
@Danny -- 已更新，已修复。

【解决方案2】：

试试

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

演示：Fiddle

【讨论】：

【解决方案3】：

我自己的建议是：

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

JS Fiddle demo.

根据设计，这不会切换第二个选择元素的显示，因为老实说，我看不出有必要，因为第一个 select 将始终有一个选中的 option （即使只有默认），否则，需要选择一个未选择的选项来启动选择的change 事件（即使您想选择已经选择的option）。

参考资料：

【讨论】：