Jan de Vries Jan de Vries - 2 months ago 5
HTML Question

jquery show dropdown from dropdown

I'm using a nice script that lets me choose from a 'colors'-dropdown. When I select the first option, I placed another 'numbers'-dropdown in it. But now the problem: when I select something in this 'numbers'-dropdown everything the selectmenu dissapears. I want it to stay and give its own hyperlinks. My code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Box</title>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.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" style="margin-top:10px;"><select>
<option>Choose number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></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

You are firing this $("select").change(function(){ event when either select is changed. Make the following changes:

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

$("#colorSelect").change(function(){

This way it will only fire when the color select is changed not the number select...

If you fire it on the number select this part of the if statement will be executed:

else {
    $(".box").hide();
}

which will hide all boxes.

Working Example:

 $(document).ready(function(){
 $("#colorSelect").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();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Box</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"> </script>
</head>
<body>
<div>
    <select id="colorSelect">
        <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" style="margin-top:10px;"><select>
        <option>Choose number</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select></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> 

Comments