Show/hide drop down list based on selection of another drop down list

javascript html drop-down-menu html-lists

15,348

Your javascript code could be a lot simpler, but to just answer your question add:

document.getElementById('shirtsize' + lastDiv).disabled = true;

after:

document.getElementById(lastDiv).className = "hiddenMenu";

And add:

document.getElementById('shirtsize' + divName).disabled = false;

after:

document.getElementById(divName).className = "visibleMenu";

Then add disabled to both hidden select tags.

Like:

<select name="subjectCategory" id="shirtsizemale" disabled>

disabled means it does not get sent to the server.

15,348

Author by

nqw1

Updated on June 05, 2022

Comments

nqw1 almost 2 years

Yes, I've tried to search answer for this problem and I found many similar questions but none of them seemed to help me.

I have drop down list with few options and when user selects one option, another drop down list appears with correct choices. Yes, this was the easy part but I need to send selected options to a server and that's the tricky part for me. I have created two different drop down lists which pop up after the user has selected one option from the "main" drop down list. Problem is that correct values goes to the server only from the first list that pops up. If I choose value from the 2nd list that pops up, the first option of the 1st list goes to server.

Here's my code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.hiddenMenu {display: none;}
.visibleMenu {display: inline;}
</style>
<script type="text/javascript">
var lastDiv = "";
function showDiv(divName) {
    // hide last div
    if (lastDiv) {
        document.getElementById(lastDiv).className = "hiddenMenu";
    }
    //if value of the box is not nothing and an object with that name exists, then change the class
    if (divName && document.getElementById(divName)) {
        document.getElementById(divName).className = "visibleMenu";
        lastDiv = divName;
    }
}
</script>
</head>
<body>
<form action="http://url.here" method="post" enctype="multipart/form-data">
    <label for="shirttype">T-shirt </label>
    <select name="category" id="shirttype" onchange="showDiv(this.value);">
        <option value="">Choose type&hellip;</option>
        <option value="female">Female</option>
        <option value="male">Male</option>
    </select>
    <br/>
    <p id="female" class="hiddenMenu">
    <label for="shirtsizefemale">Size </label>
    <select name="subjectCategory" id="shirtsizefemale">
        <option value="femaleXS">XS</option>
        <option value="femaleS">S</option>
    </select>
    </p>
    <p id="male" class="hiddenMenu">
    <label for="shirtsizemale">Size </label>
    <select name="subjectCategory" id="shirtsizemale">
        <option value="maleXS">XS</option>
          <option value="maleS">S</option>
     </select>
     </p>
    <br/>
<input type="submit" value="Upload">
</form>
</body>
</html>

So, if I select male S to be my shirt. I receive value "femaleXS" in the server. But if I select female S to be my shirt, value goes correctly to server. Only the value from the 1st popping up list goes correctly to the server.

Ok, so then I decided to make only one list that pops up and this list would have all the options. I would just hide the wrong options depending on what type of shirt user selects. Problem is, I run out of JS skills :) This JS code I'm using I got from here.

Help me out. I guess one drop down list with hidden values would be the best choice but I just don't know how to do it :P