根据下拉选择隐藏或显示div

Question

This is my code to show or hide div based on dropdown selection. 这是我的代码，用于基于下拉选择显示或隐藏div 。 It works properly but I have a problem with div.red . 它可以正常工作，但是div.red有问题。 As you see this div also contains a dropdown list and when I select one of the options in this dropdown it makes the whole red div box disapear. 如您所见，该div也包含一个下拉列表，当我在该下拉列表中选择一个选项时，它将使整个红色div框消失。 I do not know what to do. 我不知道该怎么办。 Please help me, thank you 请帮帮我，谢谢

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Show Hide Using Select Box</title> <style type="text/css"> .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red{ background: #ff0000; } .green{ background: #00ff00; } .blue{ background: #0000ff; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function(){ $(this).find("option:selected").each(function(){ if($(this).attr("value")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } else if($(this).attr("value")=="green"){ $(".box").not(".green").hide(); $(".green").show(); } else if($(this).attr("value")=="blue"){ $(".box").not(".blue").hide(); $(".blue").show(); } else{ $(".box").hide(); } }); }).change(); }); </script> </head> <body> <div> <select> <option>Choose Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </div> <div class="red box"> <p> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select></p> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> </div> <div class="green box">You have selected <strong>green option</strong> so i am here</div> <div class="blue box">You have selected <strong>blue option</strong> so i am here</div> </body> </html>

Answer 1

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Show Hide Using Select Box</title> <style type="text/css"> .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red{ background: #ff0000; } .green{ background: #00ff00; } .blue{ background: #0000ff; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#first").change(function(){ $(this).find("option:selected").each(function(){ if($(this).attr("value")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } else if($(this).attr("value")=="green"){ $(".box").not(".green").hide(); $(".green").show(); } else if($(this).attr("value")=="blue"){ $(".box").not(".blue").hide(); $(".blue").show(); } else{ $(".box").hide(); } }); }).change(); }); </script> </head> <body> <div> <select id="first"> <option>Choose Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </div> <div class="red box"> <p> <select id="second"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select></p> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> </div> <div class="green box">You have selected <strong>green option</strong> so i am here</div> <div class="blue box">You have selected <strong>blue option</strong> so i am here</div> </body> </html>

Your code runs the script on both selects, make them unique with an ID to select them individually. 您的代码在两个选择上都运行脚本，并使其具有唯一性（带有ID）以分别选择它们。

Answer 2

As you are using Element Selector ('element') , the event handler is attached with every select element. 当您使用Element Selector（'element'）时，事件处理程序随每个select元素一起附加。

Instead you can specify the ID to color chooser select element and the bind event handler using ID Selector . 相反，您可以使用ID Selector来指定颜色选择器选择元素的ID和绑定事件处理程序。 Thus the event handler will be attached with desired element only. 因此，事件处理程序将仅附加所需的元素。

Selects a single element with the given id attribute. 选择具有给定id属性的单个元素。

HTML 的HTML

<select id="colorChooser">
    <option>Choose Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Script 脚本

$("#colorChooser").change(function() {
});

Also note to get the selected value of the select element, val() can be used. 另请注意，要获取选择元素的选定值，可以使用val() 。 No need to use .each() with :selected selector. 无需将.each()与:selected选择器一起使用。

 $(document).ready(function() { $("#colorChooser").change(function() { if ($(this).val() !== "") { var selector = "." + $(this).val(); $('.box').not(selector).hide(); $(selector).show(); } else { $(".box").hide(); } }).change(); });

 .box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; }

 <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <div> <select id="colorChooser"> <option>Choose Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </div> <div class="red box"> <p> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </p> First name: <input type="text" name="fname"> <br>Last name: <input type="text" name="lname"> <br> </div> <div class="green box">You have selected <strong>green option</strong> so i am here</div> <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

Answer 3

Give the Id to first dropdown and perform the change event based of id selectors 将ID设置为第一个下拉列表，并根据ID选择器执行更改事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Select Box</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#ddColor").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="red"){
                $(".box").not(".red").hide();
                $(".red").show();
            }
            else if($(this).attr("value")=="green"){
                $(".box").not(".green").hide();
                $(".green").show();
            }
            else if($(this).attr("value")=="blue"){
                $(".box").not(".blue").hide();
                $(".blue").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select id="ddColor">
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">
<p> <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></p>
    First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
    </div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

similarly, you can use the id for second select for its change events. 同样，您可以将ID用于其更改事件的第二选择。

Hope this may helps you :-) 希望这可以对您有所帮助:-)

根据下拉选择隐藏或显示div

问题描述

3 个解决方案

解决方案1
1 2016-06-19 11:08:18

解决方案2
0 2016-06-19 10:59:46

解决方案3
0 已采纳 2016-06-19 11:06:53

根据下拉选择隐藏或显示div

问题描述

3 个解决方案

解决方案1 1 2016-06-19 11:08:18

解决方案2 0 2016-06-19 10:59:46

解决方案3 0 已采纳 2016-06-19 11:06:53

解决方案1
1 2016-06-19 11:08:18

解决方案2
0 2016-06-19 10:59:46

解决方案3
0 已采纳 2016-06-19 11:06:53