如何基于下拉选择显示div

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

试试这个