드롭 다운 선택에 따라 div를 표시하는 방법

Question

특정 솔루션을 검색했지만 찾을 수없는 답변을 찾은 것 같습니다. 각 섹션에 대해 미리 개발 된 모듈을 선택하는 CMS 시스템을 개발 중입니다.

사용자가 첫 번째 드롭 다운 목록 (select id = 'section1')에서 모듈을 선택하면이 모듈에 대한 속성 목록에 이 표시됩니다. 사용자가 두 번째 드롭 다운 목록 (select 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와는 다음과 같습니다 선택 드롭 다운에 연결되어 있지 않은 모든 div의 숨겨집니다

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

. "Module 2"드롭 다운에서 선택하면 "Module 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(); 
}); 

을 시도해보십시오이 하나