Question

首先，这是我第一次使用jQuery，所以我的代码不会是最好的。我正在根据3个投递箱在我的工作网站上添加一个过滤器：燃料类型，驱动器类型和车辆类型。我希望当有人选择汽油时，它会显示我已经设法实现的所有汽油车，但现在我有点卡住了。我现在想要它显示基于所有3个盒子，所以如果有人选择汽油，然后汽车，然后汽车，它将只显示汽油自动车。我似乎无法让3个盒子一起工作。所以请帮忙。

<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript">                                         
$(document).ready(function() {
    // fuels
    $("#fuel").change(function() {
      if ($("#fuel option[value='petrol']").attr('selected')) {
        $('div[class*=petrol]').css('display','block');


      }
          if ($("#fuel option[value='diesel']").attr('selected')) {

        $('div[class*=diesel]').css('display','block'); 


      }
      // end
     //drivetype

    }); 
        $("#drive").change(function() {
      if ($("#drive option[value='man']").attr('selected')) {
        $('div[class*=manual]').css('display','block');


      }
          if ($("#drive option[value='auto']").attr('selected')) {
        $('div[class*=auto]').css('display','block');


      }
      //end


    }); 
    // vech type
    $("#type").change(function() {
      if ($("#type option[value='car']").attr('selected')) {
        $('div[class*=car]').css('display','block');


      }
          if ($("#type option[value='4']").attr('selected')) {
        $('div[class*=4]').css('display','block');


     }

      if ($("#type option[value='7']").attr('selected')) {
        $('div[class*=7]').css('display','block');


     }

     if ($("#type option[value='van']").attr('selected')) {
        $('div[class*=van]').css('display','block');


     }
    // end



    });
  });

<select id="fuel">
<option value="none">fuel</option>
<option value="petrol">petrol</option>
<option value="diesel">diesel</option>

</select>
<select id="drive">
<option value="none">drive</option>
<option value="man">manual</option>
<option value="auto">auto</option>
</select>
<select id="type">
<option value="none">type</option>
<option value="car">car</option>
<option value="4">4x4</option>
<option value="7">people carrier</option>
<option value="van">van</option>
</select>

Answer 1

基本上，当您想要展示汽车时，您想要检查所有3个选择框的值，以便您知道要显示的车辆

在这种情况下，当显示汽车“汽车”时，你需要检查汽油和汽车。在为“汽车”展示汽车时，您需要检查所有3辆汽车。

编辑：

$("#type").change(function() {
    // check previous select box value, check this box value
    // output the correct cars
});

对于最后一个，您只需检查前两个框和此框并输出正确的汽车

Answer 2

尝试做类似的事情：

 $("#fuel").change(function() {
   var value = $(this).val();

   $(".elements_to_hide").hide(); //check if needed

   $("." + value).show();

});

请不要t take it personally, but I对您的代码提出一些建议：

尽量避免这样复杂的约束：$（'div [class * = diesel]'）。It will affect the performance。
JQuery包含show / hide DOM元素的内置函数 - .show（）,. hide（）
要选择“选择”选项，请使用.val（）;

希望答案对您有所帮助。最好的问候！

div hide / show if语句多个下拉框

2 个答案: