JQuery - 2つの異なる選択ドロップダウン値に基づいてDIVSを表示しない

Question

2つの選択ドロップダウンを作成し、divを表示/非表示にしました。しかし、2つの別々のドロップダウンから選択される2つの値に応じてdivをベースにしたい。

つの値に基づいてDIV /ショーの非表示を表示するために、私は選択肢番号2

$(document).ready(function(){ 
$("select").change(function(){ 
    $(this).find("option:selected").each(function(){ 
     if($(this).attr("value")=="bfcn") 

     { 
      $(".discount-info").not(".bfcn").hide(); 
      $(".bfcn").show(); 
     } 

     else{ 
      $(".discount-info").hide(); 
     } 
    }); 
}) 
.change(); 
}); 

HTML

<div> 
    <select> 
     <option>Where are you travelling to?</option> 
     <option value="bfcn">Belfast</option> 
     <option value="bflp">Liverpool</option> 
    </select> 
    <select class="peak"> 
     <option>What month are you travelling in?</option> 
     <option value="offpeak">March, April, May, September</option> 
     <option value="peak">July, August</option> 
    </select> 
</div> 
<div class="bfcn discount-info"> 
    <div class="content"> PDF LINK HERE </div> 
</div> 

Answer 1

に対処するために、再度これをフィルタリングする必要がある、私の作業コードの下を参照してください。ループする必要はありません。これを試してください：

<script> 
$(document).ready(function(){ 
    $('select').change(function(){ 
     if (($(this).val() == 'bfcn') && ($(this).siblings('select').val() == 'bfcn')){ 
     $('.bfcn').show(); 
     } else { 
     $('.bfcn').hide(); 
     } 
    }); 
}); 
</script> 

これは、両方の選択値が正しい場合にのみショーを実行します。 else if文で一連の値を実行して、さまざまな選択肢で異なるものを表示することもできます。 3つ以上の選択と兄弟がうまくいかない場合は、直接クラスを使うことができますが、あなたの質問からすればうまくいくはずです。

<select title="Select 1" id="select1"> 
    <option value="">Select an option</option> 
    <option value="1">1</option> 
    <option value="bfcn">bfcn</option> 
</select> 
<select title="Select 2" id="select2"> 
    <option value="">Select an option</option> 
    <option value="3">3</option> 
    <option value="bfcn">bfcn</option> 
</select> 
<p class="bfcn" style="display: none;">BFCN</p>