Question

我搜索了一个特定的解决方案，但似乎无法找到我正在寻找的答案。我正在开发一个CMS系统，为每个部分选择一个预先开发的模块。

当用户从第一个下拉列表中选择一个模块（选择id ='section1'）时，将显示一个属性列表这个模块。当用户从第二个下拉列表中选择一个模块（选择id ='section2'）时，应显示该模块的属性。有5个下拉列表可供选择，每个列表都有相同的选项。我遇到的问题是，当第一次选择时，属性显示良好和良好。但是当选择第二个下拉列表时，第一个选择的属性集将被第二个选择的相应div替换。

我需要的是即使在选择第二个选择之后也要显示第一个选择的div。因此应显示两个模块的属性。当第一个选项中的模块被更改时，div也应该显示它的属性。请帮忙。我知道这是用一些jquery完成的，但我不知道如何操作代码来做我需要的东西

示例：

<select id="section1"><option>Please Select</option>
<option value="1">Module 1</option>
<option value="2">Module 2</option>
<option value="3">Module 3</option></select>

<select id="section2"><option>Please Select</option>
<option value="1">Module 1</option>
<option value="2">Module 2</option>
<option value="3">Module 3</option></select>

<div id="module1" class="page" style="display:none;">Module 1 Properties</div>
<div id="module2" class="page" style="display:none;">Module 2 Properties</div>
<div id="module3" class="page" style="display:none;">Module 3 Properties</div>

每个部分的模式都会重复，就像我提到的那样，有5个部分，但如果你能帮我分2个部分，我会明白这个部分。

我正在使用的jquery是：

$(function() {
$('#section1').change(function() {
    var val = $(this).val();
    if (val) {
        $('div:not(#module' + val + ')').slideUp();
        $('#module' + val).slideDown();
    } else {
        $('div').slideDown();
    }
});
});

$(function() {
$('#section2').change(function() {
    var val = $(this).val();
    if (val) {
        $('div:not(#module' + val + ')').slideUp();
        $('#module' + val).slideDown();
    } else {
        $('div').slideDown();
    }
});
});

Answer 1

代码

$('div:not(#module' + val + ')').slideUp();

将隐藏未连接到所选下拉列表的所有div。当您在“模块2” - 下拉列表中进行选择时，这将导致“模块1”-div隐藏。

尝试删除它，暂时无法测试。

Answer 2

http://jsfiddle.net/hc6sh/1/

$('select option').click(function(){
    var num = $(this).index()
    var num =  '#module'+num
 // alert(num)
    $('.page').slideUp();
     $(num).slideDown();
});

试试这个

如何根据下拉选项显示div

2 个答案: