Показать div в зависимости от двух отдельных вариантов выбора

Question

Я наткнулся на проблему.

У меня есть два разных поля выбора. У каждого из них есть варианты цвета: синий, зеленый, черный, желтый. Я хочу показать разные 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

Для этого вы можете использовать функцию toggle в jQuery, чтобы показать / скрыть элемент на основе значений 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 с идентификатором, например div_yellow_black.

В jquery, что-то вроде

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