javascript - Showhide drop down list based on selection of another drop down list

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="" 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

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

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>

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

Share Improve this question edited Aug 9, 2011 at 7:59 Calum 5,3261 gold badge24 silver badges27 bronze badges asked Aug 9, 2011 at 7:54 nqw1 1,0093 gold badges12 silver badges16 bronze badges

Would you be open to using a JavaScript library like jQuery. It will make your life incredibly easier for this. Also, Knockout.js is defined largely for this purpose. – hayesgm Commented Aug 9, 2011 at 8:01
Using JS libraries like jQuery is fine and thanks for the tip about Knockout.js. – nqw1 Commented Aug 9, 2011 at 8:30

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Showhide drop down list based on selection of another drop down list - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)