user6362236 user6362236 - 5 months ago 30
HTML Question

hid or show div boxes with two drop down lists

hi in my contact form i have two dropdown list which div boxes in the form, are hid or shown based on drop down values. the problem is i can not manage both of them.the first drop down "class=color" works properly but when i select the second drop down "class=ddcolor" instead of showing "red box" it causes to hide the whole "redd box". it is a little hard to explain in word but i send my whole code. please help. thank you



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

Your issue is you have the 'box' class for both the outer .redd and .greenn classes as well as the inner .red and .green classes. This makes the outer .redd hide when you select .red option because that is a element with class 'box' without class 'red'.

It should work if you rename inner classes to .inner-box and then update the jquery to:

 $("#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/