隐藏或显示带有两个下拉列表的 div 框答案

【问题标题】：hid or show div boxes with two drop down lists隐藏或显示带有两个下拉列表的 div 框
【发布时间】：2016-06-22 00:05:38
【问题描述】：

嗨，在我的联系表单中，我有两个下拉列表，表单中的 div 框根据下拉值隐藏或显示。问题是我无法同时管理它们。第一个下拉菜单“class=color”正常工作，但是当我选择第二个下拉菜单“class=ddcolor”而不是显示“红色框”时，它会导致隐藏整个“redd”盒子”。用文字解释有点困难，但我发送了我的整个代码。请帮忙。谢谢

<!doctype html>
<html>
<head>
<!--hide/show div based on dropdown selection-->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script src="js/hid_show_div.js"></script>
<script src="js/main_hid_show.js"></script>
</head>
<body>
  		    <div>
			<fieldset>
			<p dir="rtl"><label>case1</label>
            <select  id="Color" required="required">
            <option>please select</option>
            <option value="redd">home<option>
            <option value="greenn">car</option>
            </select></p>
	     	</fieldset>
            </div>
<div class="redd box">	
            <div>
			<fieldset>
			<p dir="rtl"><label>case2</label>
            <select  id="ddColor" required="required">
            <option>please select</option>
            <option value="red">sell<option>
            <option value="green">rent</option>
            </select></p>
	     	</fieldset>
            </div>
            <div class="red box">			
           </div>
           <div class="green box">			
              </div>
    
</div>
<div class="greenn box">			
</div>
</body>
</html>

main_hid_show.js
$(document).ready(function(){
    $("#Color").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="redd"){
                $(".box").not(".redd").hide();
                $(".redd").show();
            }
            else if($(this).attr("value")=="greenn"){
                $(".box").not(".greenn").hide();
                $(".greenn").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

hid_show_div.js
$(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{
                $(".box").hide();
            }
        });
    }).change();
});

【问题讨论】：

标签： javascript html

【解决方案1】：

您的问题是外部.redd 和.greenn 类以及内部.red 和.green 类都有'box' 类。当您选择 .red 选项时，这会使外部 .redd 隐藏，因为这是一个具有类 'box' 而没有类 'red' 的元素。

如果您将内部类重命名为.inner-box，然后将 jquery 更新为：

 $("#ddColor").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="red"){
                $(".inner-box").not(".red").hide();
                $(".red").show();
            }
            else if($(this).attr("value")=="green"){
                $(".inner-box").not(".green").hide();
                $(".green").show();
            }
            else{
                $(".inner-box").hide();
            }
        });
    }).change();

https://jsfiddle.net/wme028os/2/

【讨论】：

【解决方案2】：

将另一个类添加到 redd box 并将其包含在您的 jQuery not 选择器中：

<div class="redd box keepme">

...和：

$(".box").not(".red,.keepme").hide();

JSFiddle example

【讨论】：

非常感谢您的回答。我真的很感激