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

This is my code to show or hide div based on dropdown selection. It works properly but I have a problem with 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. I do not know what to do. Please help me, thank you

这是我根据下拉选择显示或隐藏div的代码。它工作正常,但我有div.red的问题。如你所见,这个div还包含一个下拉列表,当我选择此下拉列表中的一个选项时,它会使整个红色div框消失。我不知道该怎么办。请帮帮我,谢谢

<!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>

3 个解决方案

#1

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 :-)

希望这可以帮助你:-)

#2

<!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,以便单独选择它们。

#3

As you are using Element Selector ('element'), the event handler is attached with every select element.

当您使用元素选择器('element')时,事件处理程序将附加每个select元素。

Instead you can specify the ID to color chooser select element and the bind event handler using ID Selector. Thus the event handler will be attached with desired element only.

相反,您可以使用ID Selector指定颜色选择器选择元素的ID和绑定事件处理程序。因此,事件处理程序将仅附加所需元素。

Selects a single element with the given id attribute.

选择具有给定id属性的单个元素。

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. No need to use .each() with :selected selector.

另请注意,要获取select元素的选定值,可以使用val()。无需使用.each():选择的选择器。

$(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>

#1