0

我在尝试创建其背后的代码时遇到问题。我正在尝试根据选择选项选择显示/隐藏 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>

你们能帮我做这个吗？

4

3 回答 3

2

selects为了这个例子，我会给你一些ID ，让我们分别使用sel1和sel2。我还将您的valuein更改option为只是一个数字，否则value将需要对 the 或正则表达式进行一些修剪：

$("#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/

于 2013-10-03T13:36:00.050 回答
0

尝试

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

演示：小提琴

于 2013-10-03T13:48:30.780 回答
0

我自己的建议是：

/* 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 小提琴演示。

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

参考：

于 2013-10-03T13:45:20.207 回答