如何基于下拉选择显示div

Question

I've searched for a specific solution but cant seem to find the answer I'm looking for. I'm developing a CMS system that selects a pre-developed module for each section.

When a user selects a module from the first dropdown list (select id='section1'), a list of properties will display for this module. When a user selects a module from the second dropdown list (select id='section2') the properties of that module should display. There are 5 dropdown lists to choose from, each with the same options. The problem I'm having is that when the first selection is made, the properties display all good and well. But when the second drop down list is selected, the first selection's set of properties are replaced by the corresponding div of the second selection.

What I need is for the div of first selection to display even after the second selection is chosen. So the properties for both modules should display. When the module in the first option is changed, then so should the div displaying it's properties. Please help. I know this is done with some jquery but I dont know how to manipulate the code to do what I need

Example:

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

The pattern repeats for each section, Like I mentioned, there are 5 sections, but I'll get the idea if you could help me with 2 sections.

The jquery that I'm using is:

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

The code

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

will hide all divs that isn't connected to the dropdown that is selected. This will cause the "Module 1"-div to hide when you are selecting in the "Module 2"-dropdown.

Try and remove that, I can't test it for the moment.

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

Try this one