2つの別々の選択オプションに応じてdivを表示

Question

問題が発生しました。

私は2つの異なる選択フィールドを持っています。これらのそれぞれには、青、緑、黒、黄色のカラーオプションがあります。私はあなたがそうのように作るselctionsかに応じて異なるdivを表示したい：

セレクション黄色+黒ショーのdiv＃1 セレクション黒+黄色のショーのdiv＃2 など など

私が行うことができますどのようにこれは賢明な方法で？

アップデート：ここで

が（それは私が一つだけのselect要素に応じて、何をしたいん）今私が持っているコードスニペットです：

<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

のようなもの。両方の選択リストを同じ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

HあなたのdivのIDにオプションの組み合わせを指定することについて yellow+blackを選択すると、IDがdiv_yellow_blackのdivが表示されます。 jqueryので

、このお2つの選択リストの値に基づいて要素を表示/非表示するjQueryのでtoggle機能を使用することができますを行うには

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