두 개의 별도 선택 옵션에 따라 div 표시

Question

문제가 발생했습니다.

두 개의 서로 다른 선택 필드가 있습니다. 각각의 색상 옵션은 파란색, 녹색, 검은 색, 노란색입니다. 난 당신과 같이 할 selctions에 따라 다른 div를 보여주고 싶은 :

선택 노란색 + 검은 색을 보여줍니다 DIV # 1 선택 블랙 + 노란색 쇼 DIV # 2 등 등

내가 할 수있는 방법 이게 현명한 방법이야?

가 업데이트 : 여기

내가 지금 가지고 코드입니다 (그것은 내가 하나 개의 선택 요소에 따라하지만 원하는 것을) : 다음

<script> 
$(document).ready(function() { 
    $(function() { 
    $('#thecolor').change(function(){ 
     $('#box_image, #box_image2, #box_image3, #box_image4').hide(); 
     $('.' + $(this).val()).show(); 
    }); 
    }); 
}); 

<select id="thecolor"> 
    <option>Choose outer color</option> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
    <option value="dark_green">Green</option> 
    <option value="purple">Purple</option> 
</select> 

및

<div id="box_image" style="display:none;" class="blue"> 
    <img src="images/wine-bottle-box_blue.png"/> 
</div> 

Answer 1

같은 2 개 선택 목록의 값을 기준으로 요소를 숨 깁니다. 동일한 click 핸들러까지 두 선택 목록을 모두 후크하고 조건을 확인하십시오.

var $s1 = $('#select1').change(change); 
var $s2 = $('#select2').change(change); 

function change(){ 
    $('#div1').toggle($s1.val() == 'Yellow' && $s2.val() == 'Black') 
    $('#div2').toggle($s1.val() == 'Black' && $s2.val() == 'Yellow') 
}; 

라이브 예 : http://jsfiddle.net/6AUn6/

Answer 2

귀하의 div의 이름을 옵션 조합으로 지정하는 것과 관련하여 yellow+black을 선택하면 div_yellow_black과 같은 ID를 가진 div가 표시됩니다. JQuery와에

/보여주기 위해 당신이 jQuery를에 toggle 기능을 사용할 수 있습니다 이렇게하려면

var var1 = $("#option1").val(); 
var var2 = $("#option2").val(); 
$("#div_" + var1 + "_" + var2).show();