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

时间:2016-03-30 19:35:54

标签: javascript jquery html css

我创建了2个选择下拉菜单,让它显示/隐藏div。但是我想根据2个值来建立我的div,这些值将从2个单独的下拉列表中选择。

请参阅下面的工作代码,根据一个值显示div / show hide,我需要再次对其进行过滤以适应2号选项。

SELECT dno from employee ORDER BY Salary DESC LIMIT 1

HTML

$(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();
});

1 个答案:

答案 0 :(得分:0)

无需循环。试试这个:

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

如果两个选择的值都正确,这将只执行show。你甚至可以在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>