0

まず、jQuery を使用するのはこれが初めてなので、私のコードは最適ではありません。燃料の種類、ドライブの種類、車両の種類の 3 つのドロップ ボックスに基づいて、作品の Web サイトにフィルターを追加しています。誰かがガソリンを選択すると、すべてのガソリン車が表示されるようにしたいと思っています。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>
4

2 に答える 2

0

次のようなことを試してください。

 $("#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]'）のような複雑な構造は避けてください。パフォーマンスに影響します。
  2. JQueryには、DOM要素の表示/非表示用の組み込み関数が含まれています— .show（）、.hide（）
  3. 「選択」の選択されたオプションを取得するには、.val（）;を使用します。

回答がお役に立てば幸いです。よろしくお願いします！

于 2012-05-09T18:17:06.310 に答える
0

基本的に、車を表示したいときは、3 つの選択ボックスすべての値をチェックして、表示する車がわかるようにします。

この場合、「auto」の車を表示するときは、自動車だけでなくガソリンもチェックする必要があります。「車」で車を表示する場合は、3 つすべてをチェックする必要があります。

編集：

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

最後のボックスについては、前のボックスとこのボックスの両方をチェックして、正しい車を出力するだけです

于 2012-05-09T18:08:27.347 に答える