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

#jquery #forms #html-select

#jquery #формы #html-выбрать

Вопрос:

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

У меня есть два разных поля выбора. У каждого из них есть варианты цвета: синий, зеленый, черный, желтый. Я хочу показывать разные разделы в зависимости от того, какие выборки вы делаете, например:

Выделение желтым черным показывает 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>

1. Вы используете выбор одного параметра или множественный выбор? Не могли бы вы опубликовать соответствующий фрагмент вашего кода?

2. Это зависит от того, создали ли вы уже все div для всех возможностей или хотите сгенерировать их из выбора

Ответ №1:

Для этого вы можете использовать toggle функцию в jQuery для отображения / скрытия элемента на основе значений 2 списков выбора. Просто подключите оба списка выбора к одному и тому же click обработчику и проверьте условие.

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

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

Живой пример: http://jsfiddle.net/6AUn6 /

Ответ №2:

Как насчет присвоения идентификатора вашего div с помощью комбинации параметров. Таким образом, при выборе yellow black будет отображаться div с подобным идентификатором div_yellow_black .

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

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