div hide/show if文複数のドロップボックス

Question

まず、これはjQueryを使用した初めてのことです。そのため、私のコードはベストにならないでしょう。私は3つのドロップボックスに基づいて私の作品のウェブサイトにフィルタを追加しています：燃料タイプ、ドライブタイプ、および車種。私は誰かがガソリンを選ぶとき、それが達成したすべてのガソリン車を表示することを望んでいるが、今はちょっと立ち往生している。私は今、それが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

編集をチェックする必要があります。正しい車あなたは、単に以前のボックスの両方をチェックし、最後の1と、このボックスと出力に

$("#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を着用してください：

ような何かをしてみ

1. $（ 'div [class * = diesel]'）のような複雑なコンストラクトは避けてください。 It will affect the performance。
2. JQueryには、DOM要素の表示/非表示の組み込み関数が含まれています - .show（）、.hide（）
3. "select"の選択肢を取得するには、.val（）;

希望の回答はお役に立ちます。宜しくお願いします！