根据两个单独的选择选项显示 div

Question

我偶然发现了一个问题。

我有两个不同的选择字段。每个都有颜色选项：蓝色、绿色、黑色、黄色。我想根据您所做的选择显示不同的 div，如下所示：

选择黄色+黑色显示 div#1 选择黑色+黄色显示 div#2 ETC。 等等。

我怎样才能以聪明的方式做到这一点？

更新：

这是我现在拥有的一个代码片段（它执行我想要的操作，但仅取决于一个选择元素）：

<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

为此，您可以使用 jQuery 中的 toggle 函数来显示/隐藏基于 2 个选择列表的值的元素。只需将两个选择列表挂钩到同一个点击处理程序并检查条件即可。

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 的 id 怎么样？
因此，选择yellow+black将显示id为div_yellow_black的div。

在 jquery 中，类似

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