JQuery-显示基于2个不同选择下拉值的隐藏DIVS

JQuery - Show Hide DIVS based on 2 different select drop down values

本文关键字：DIVS 隐藏 选择 显示 2个 JQuery-      更新时间：2023-10-17

我已经创建了两个选择下拉列表，并让它显示/隐藏div。但是，我希望我的div基于两个值，这两个值将从两个单独的下拉列表中选择。

请参阅下面的工作代码，为了显示基于一个值的div/show-hide，我需要再次对其进行筛选，以适应第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>

无需循环。试试这个：

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

只有在两个选择的值都正确的情况下，才会执行该节目。您甚至可以在else-if语句中运行一系列值，以便在不同的选择中显示不同的内容。如果你有两个以上的选择，而兄弟类不起作用，你可以使用直接类，但从你的问题来看，这应该起作用。

这是我的演示HTML:

 <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>
相关文章：