Question

嗨，在我的联系表格中，我有两个下拉列表，表格中的div框，根据下拉值隐藏或显示。问题是我无法管理它们。第一个下拉“class = color”正常工作，但是当我选择第二个下拉“class = ddcolor”而不是显示“red box”时，它会隐藏整个“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();
});

Answer 1

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

如果将内部类重命名为.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/

Answer 2

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

<div class="redd box keepme">

...和

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

JSFiddle example

使用两个下拉列表隐藏或显示div框

2 个答案: