Question

我偶然发现了一个问题。

我有两个不同的选择字段。每个都有颜色选择：蓝色，绿色，黑色，黄色。我想根据你做出的选择来显示不同的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

为此，您可以使用jQuery中的toggle函数根据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的id。因此，选择yellow+black会显示ID为div_yellow_black的div。

在jquery中，类似

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

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

2 个答案: