Show a second dropdown based on previous dropdown selection
75,788
Solution 1
One way or another, you've already ended up with what's probably the easiest HTML markup to use for the job:
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="Airman">Airman</option>
<option value="Airman First Class">Airman First Class</option>
<option value="Senior Airman">Senior Airman</option>
<option value="Staff Sergeant">Staff Sergeant</option>
<option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>
and then one <element> container for each possibility of <option>.
<div>
// For Airman
</div>
<div>
// For Senior Airman
</div>
... etc etc...
I'd use this same layout for everything that depends on which <option> is selected; the unique-line-of-text you want, the other-select-box, etc etc. I'd wrap each one in a container element, so you can easily target all the elements as one.
<div class="container">
<div>
Line of text for Airman
</div>
<div>
Line of text for Senior Airman
</div>
</div>
<div class="container">
<div>
<select>
<option>Airman Stuff</option>
</select>
</div>
<div>
<select>
<option>Senior Airman Stuff</option>
</select>
</div>
</div>
Now whack a identifier to each of the <div>'s we've got, so when the "Airman" is selected, we know which <div>'s are the Airmans (so we know to show those ones!)
<div class="container">
<div class="airman">
Line of text for Airman
</div>
<div class="senior-airman">
Line of text for Senior Airman
</div>
</div>
<div class="container">
<div class="airman">
<select>
<option>Airman Stuff</option>
</select>
</div>
<div class="senior-airman">
<select>
<option>Senior Airman Stuff</option>
</select>
</div>
</div>
And add the same identifier to the <options>'s of the <select id="rank">:
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
Now we've got this markup, applying the JavaScript for the hiding/showing is so easy!
$(document).ready(function () {
$('#Rank').bind('change', function () {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change'); // Setup the initial states
});
Done; checkout an example: http://jsfiddle.net/3UWk2/1/
An update for your comment
The reason your attempt to change the code like you did didn't work is because we've currently got no event handler bound to the 2nd level <select> boxes; only to <select id="rank">
You need to basically repeat everything we've just done for the first level nav, for the second level nav. Instead of using an #id selector for the <select>, use a .class; because we've got more than one <select> element to target, and #id's have to be unique:
$('.second-level-select').bind('change', function () {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change'); // Setup the initial states
We've also had to change the name of the div.container, to stop the <select> boxes hiding each others elements.
Check out an updated example here: http://jsfiddle.net/3UWk2/3/
Solution 2
Wow that's a lot of code... but actually it was really easy to do with jQuery (if that's an option). See my example.
First thing you need to do is remove the spaces in the id's. That's generally bad. Secondly, you just show/hide based off of those values in the select list passing them as id's.
The jQuery (don't forget to include the jQuery link, though):
$("#Rank").change(function(){
correspondingID = $(this).find(":selected").val()
$(".style-sub-1").hide();
$("#" + correspondingID).show();
})
Solution 3
My solution and advice would be to use AJAX. If you have a lot of options and for each a lot of other options, there is no point in loading them all instantly. The idea is to send an AJAX request and update the second select with proper options. You can also store proper text for each option in the database.. in this way, you have everything you want and you do not force user to download unnecessary selects
Solution 4
include html code first
<!-------first dropdown----------->
<select name="make" id="elements">
<option value="">-</option>
<option value="Satec" >Satec</option>
<option data-val='m2' value="Masibus" >Masibus</option>
<option data-val='m3' value="Pyrotech" >Pyrotech</option>
<option data-val='m4' value="Schneider" >Schneider</option>
</select>
<!---------second dropdown---------->
<select name="model" id="category">
<option value="">-</option>
<option value="PM130" >PM130</option>
<option value="PM2160A" >PM2160A</option>
<option value="MFM101" >MFM101</option>
<option value="ABC" >ABC</option>
</select>
after include js script
<script>
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'm2') {
category.value = 'PM2160A';
}
else if (optionSelected.dataset.val === 'm3') {
category.value='MFM101';
}
else if (optionSelected.dataset.val === 'm4') {
category.value='ABC';
}
else {
category.value = 'PM130';
}
} else {
category.value = '';
}
}
</script>
It will sure work.
Related videos on Youtube
10 : 24
How To Create Multiple Dependent Drop Down Lists In Excel
07 : 39
How to Enable Disable a Dropdown Based on Value in Another Dropdown in Javascript
08 : 13
Extract Data Based on a Drop Down List Selection in Excel | Filter Data With Drop Down List Excel
03 : 04
HTML : Show a second dropdown based on previous dropdown selection
02 : 23
CSS : Show a second dropdown based on previous dropdown selection
02 : 59
Show a second dropdown based on previous dropdown selection - CSS
11 : 57
Create Multiple Dependent Drop-Down Lists in Excel (on Every Row)
Author by
Scott
Updated on July 09, 2022Comments
-
Scott almost 2 years
First off, I hate bringing up an issue that has already been dealt with, but you should know the other options I have found on this site aren't working for me.
Basically, I want to construct a short form where there are two dropdown boxes. The first is always shown, the second is hidden by default. When a certain option in the first dropdown box is selected, I then want the second dropdown box to show. This is a perfect example of what I mean:
HOWEVER, unlike the above example, I have a separate set of options to display in the dropdown box for EACH option selected in the first dropdown box, and not just for one of the options. In other words, in the above example, if you select "China" the second dropdown box will appear, but if you select anything else it will remain hidden. That's not what I want. I want a different dropdown to display if you selected "Taiwan", and yet a different dropdown to display if you selected "Germany", and etc. for each option. I tried to simply duplicate the javascript in that example for each option, changing the name tags accordingly, but that didn't work (I am a newbie when it comes to Javascript).
So I ran across this example, which is exactly the sort of thing I am looking for:
Yet for some reason this code doesn't seem to work for me. It has no effect at all; the second dropdown simply remains hidden regardless of what is selected. My dropdown lists are much more numerous and lengthy than the one in the above example. Here is the HTML I have right now:
Dropdown 1
<div class="ccms_form_element cfdiv_custom" id="style_container_div"> <label>Choose Rank: </label><select size="1" id="Rank" class=" validate['required']" title="" type="select" name="Rank"> <option value="">-Select Your Rank-</option> <option value="Airman">Airman</option> <option value="Airman First Class">Airman First Class</option> <option value="Senior Airman">Senior Airman</option> <option value="Staff Sergeant">Staff Sergeant</option> <option value="Senior Master Sergeant">Senior Master Sergeant</option> </select><div class="clear"></div><div id="error-message-style"></div></div>Dropdown 2:
<div id="Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> <label>Which Job? </label> <select id="Airman" name="Airman"> <option value="">-Choose A Job-</option> <option value="Basic Ore Miner - Level 1a">Basic Ore Miner - Level 1</option> <option value="Basic Ore Miner - Level 2a">Basic Ore Miner - Level 2</option> <option value="Basic Ore Miner - Level 3a">Basic Ore Miner - Level 3</option> <option value="Basic Ore Miner - Level 4a">Basic Ore Miner - Level 4</option> <option value="Basic Ore Miner - Level 5a">Basic Ore Miner - Level 5</option> <option value="Basic Ore Miner - Level 6a">Basic Ore Miner - Level 6</option> <option value="Basic Ore Miner - Level 7a">Basic Ore Miner - Level 7</option> <option value="Plagioclase Miner - Level 1a">Plagioclase Miner - Level 1</option> <option value="Plagioclase Miner - Level 2a">Plagioclase Miner - Level 2</option> <option value="Plagioclase Miner - Level 3a">Plagioclase Miner - Level 3</option> <option value="Plagioclase Miner - Level 4a">Plagioclase Miner - Level 4</option> <option value="Plagioclase Miner - Level 5a">Plagioclase Miner - Level 5</option> <option value="Plagioclase Miner - Level 6a">Plagioclase Miner - Level 6</option> <option value="Plagioclase Miner - Level 7a">Plagioclase Miner - Level 7</option> <option value="Omber Miner - Level 1a">Omber Miner - Level 1</option> <option value="Omber Miner - Level 2a">Omber Miner - Level 2</option> <option value="Omber Miner - Level 3a">Omber Miner - Level 3</option> <option value="Omber Miner - Level 4a">Omber Miner - Level 4</option> <option value="Omber Miner - Level 5a">Omber Miner - Level 5</option> <option value="Omber Miner - Level 6a">Omber Miner - Level 6</option> <option value="Omber Miner - Level 7a">Omber Miner - Level 7</option> <option value="lvl-1 Mission Runner - Level 1a">lvl-1 Mission Runner - Level 1</option> <option value="lvl-1 Mission Runner - Level 2a">lvl-1 Mission Runner - Level 2</option> <option value="lvl-1 Mission Runner - Level 3a">lvl-1 Mission Runner - Level 3</option> <option value="lvl-1 Mission Runner - Level 4a">lvl-1 Mission Runner - Level 4</option> <option value="lvl-1 Mission Runner - Level 5a">lvl-1 Mission Runner - Level 5</option> <option value="lvl-1 Mission Runner - Level 6a">lvl-1 Mission Runner - Level 6</option> <option value="lvl-1 Mission Runner - Level 7a">lvl-1 Mission Runner - Level 7</option> <option value="lvl-2 Mission Runner - Level 1a">lvl-2 Mission Runner - Level 1</option> <option value="lvl-2 Mission Runner - Level 2a">lvl-2 Mission Runner - Level 2</option> <option value="lvl-2 Mission Runner - Level 3a">lvl-2 Mission Runner - Level 3</option> <option value="lvl-2 Mission Runner - Level 4a">lvl-2 Mission Runner - Level 4</option> <option value="lvl-2 Mission Runner - Level 5a">lvl-2 Mission Runner - Level 5</option> <option value="lvl-2 Mission Runner - Level 6a">lvl-2 Mission Runner - Level 6</option> <option value="lvl-2 Mission Runner - Level 7a">lvl-2 Mission Runner - Level 7</option> <option value="lvl-3 Mission Runner - Level 1a">lvl-3 Mission Runner - Level 1</option> <option value="lvl-3 Mission Runner - Level 2a">lvl-3 Mission Runner - Level 2</option> <option value="lvl-3 Mission Runner - Level 3a">lvl-3 Mission Runner - Level 3</option> <option value="lvl-3 Mission Runner - Level 4a">lvl-3 Mission Runner - Level 4</option> <option value="lvl-3 Mission Runner - Level 5a">lvl-3 Mission Runner - Level 5</option> <option value="lvl-3 Mission Runner - Level 6a">lvl-3 Mission Runner - Level 6</option> <option value="lvl-3 Mission Runner - Level 7a">lvl-3 Mission Runner - Level 7</option> <option value="lvl-4 Mission Runner - Level 1a">lvl-4 Mission Runner - Level 1</option> <option value="lvl-4 Mission Runner - Level 2a">lvl-4 Mission Runner - Level 2</option> <option value="lvl-4 Mission Runner - Level 3a">lvl-4 Mission Runner - Level 3</option> <option value="lvl-4 Mission Runner - Level 4a">lvl-4 Mission Runner - Level 4</option> <option value="lvl-4 Mission Runner - Level 5a">lvl-4 Mission Runner - Level 5</option> <option value="lvl-4 Mission Runner - Level 6a">lvl-4 Mission Runner - Level 6</option> <option value="lvl-4 Mission Runner - Level 7a">lvl-4 Mission Runner - Level 7</option> </select> </div> <div id="Airman First Class" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> <label>Which Job? </label> <select id="Airman First Class" name="Airman First Class"> <option value="">-Choose A Job-</option> <option value="Basic Ore Miner - Level 1b">Basic Ore Miner - Level 1</option> <option value="Basic Ore Miner - Level 2b">Basic Ore Miner - Level 2</option> <option value="Basic Ore Miner - Level 3b">Basic Ore Miner - Level 3</option> <option value="Basic Ore Miner - Level 4b">Basic Ore Miner - Level 4</option> <option value="Basic Ore Miner - Level 5b">Basic Ore Miner - Level 5</option> <option value="Basic Ore Miner - Level 6b">Basic Ore Miner - Level 6</option> <option value="Basic Ore Miner - Level 7b">Basic Ore Miner - Level 7</option> <option value="Plagioclase Miner - Level 1b">Plagioclase Miner - Level 1</option> <option value="Plagioclase Miner - Level 2b">Plagioclase Miner - Level 2</option> <option value="Plagioclase Miner - Level 3b">Plagioclase Miner - Level 3</option> <option value="Plagioclase Miner - Level 4b">Plagioclase Miner - Level 4</option> <option value="Plagioclase Miner - Level 5b">Plagioclase Miner - Level 5</option> <option value="Plagioclase Miner - Level 6b">Plagioclase Miner - Level 6</option> <option value="Plagioclase Miner - Level 7b">Plagioclase Miner - Level 7</option> <option value="Omber Miner - Level 1b">Omber Miner - Level 1</option> <option value="Omber Miner - Level 2b">Omber Miner - Level 2</option> <option value="Omber Miner - Level 3b">Omber Miner - Level 3</option> <option value="Omber Miner - Level 4b">Omber Miner - Level 4</option> <option value="Omber Miner - Level 5b">Omber Miner - Level 5</option> <option value="Omber Miner - Level 6b">Omber Miner - Level 6</option> <option value="Omber Miner - Level 7b">Omber Miner - Level 7</option> <option value="lvl-1 Mission Runner - Level 1b">lvl-1 Mission Runner - Level 1</option> <option value="lvl-1 Mission Runner - Level 2b">lvl-1 Mission Runner - Level 2</option> <option value="lvl-1 Mission Runner - Level 3b">lvl-1 Mission Runner - Level 3</option> <option value="lvl-1 Mission Runner - Level 4b">lvl-1 Mission Runner - Level 4</option> <option value="lvl-1 Mission Runner - Level 5b">lvl-1 Mission Runner - Level 5</option> <option value="lvl-1 Mission Runner - Level 6b">lvl-1 Mission Runner - Level 6</option> <option value="lvl-1 Mission Runner - Level 7b">lvl-1 Mission Runner - Level 7</option> <option value="lvl-2 Mission Runner - Level 1b">lvl-2 Mission Runner - Level 1</option> <option value="lvl-2 Mission Runner - Level 2b">lvl-2 Mission Runner - Level 2</option> <option value="lvl-2 Mission Runner - Level 3b">lvl-2 Mission Runner - Level 3</option> <option value="lvl-2 Mission Runner - Level 4b">lvl-2 Mission Runner - Level 4</option> <option value="lvl-2 Mission Runner - Level 5b">lvl-2 Mission Runner - Level 5</option> <option value="lvl-2 Mission Runner - Level 6b">lvl-2 Mission Runner - Level 6</option> <option value="lvl-2 Mission Runner - Level 7b">lvl-2 Mission Runner - Level 7</option> <option value="lvl-3 Mission Runner - Level 1b">lvl-3 Mission Runner - Level 1</option> <option value="lvl-3 Mission Runner - Level 2b">lvl-3 Mission Runner - Level 2</option> <option value="lvl-3 Mission Runner - Level 3b">lvl-3 Mission Runner - Level 3</option> <option value="lvl-3 Mission Runner - Level 4b">lvl-3 Mission Runner - Level 4</option> <option value="lvl-3 Mission Runner - Level 5b">lvl-3 Mission Runner - Level 5</option> <option value="lvl-3 Mission Runner - Level 6b">lvl-3 Mission Runner - Level 6</option> <option value="lvl-3 Mission Runner - Level 7b">lvl-3 Mission Runner - Level 7</option> <option value="lvl-4 Mission Runner - Level 1b">lvl-4 Mission Runner - Level 1</option> <option value="lvl-4 Mission Runner - Level 2b">lvl-4 Mission Runner - Level 2</option> <option value="lvl-4 Mission Runner - Level 3b">lvl-4 Mission Runner - Level 3</option> <option value="lvl-4 Mission Runner - Level 4b">lvl-4 Mission Runner - Level 4</option> <option value="lvl-4 Mission Runner - Level 5b">lvl-4 Mission Runner - Level 5</option> <option value="lvl-4 Mission Runner - Level 6b">lvl-4 Mission Runner - Level 6</option> <option value="lvl-4 Mission Runner - Level 7b">lvl-4 Mission Runner - Level 7</option> </select> </div> <div id="Senior Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> <label>Which Job? </label> <select id="Senior Airman" name="Senior Airman"> <option value="">-Choose A Job-</option> <option value="Basic Ore Miner - Level 1c">Basic Ore Miner - Level 1</option> <option value="Basic Ore Miner - Level 2c">Basic Ore Miner - Level 2</option> <option value="Basic Ore Miner - Level 3c">Basic Ore Miner - Level 3</option> <option value="Basic Ore Miner - Level 4c">Basic Ore Miner - Level 4</option> <option value="Basic Ore Miner - Level 5c">Basic Ore Miner - Level 5</option> <option value="Basic Ore Miner - Level 6c">Basic Ore Miner - Level 6</option> <option value="Basic Ore Miner - Level 7c">Basic Ore Miner - Level 7</option> <option value="Plagioclase Miner - Level 1c">Plagioclase Miner - Level 1</option> <option value="Plagioclase Miner - Level 2c">Plagioclase Miner - Level 2</option> <option value="Plagioclase Miner - Level 3c">Plagioclase Miner - Level 3</option> <option value="Plagioclase Miner - Level 4c">Plagioclase Miner - Level 4</option> <option value="Plagioclase Miner - Level 5c">Plagioclase Miner - Level 5</option> <option value="Plagioclase Miner - Level 6c">Plagioclase Miner - Level 6</option> <option value="Plagioclase Miner - Level 7c">Plagioclase Miner - Level 7</option> <option value="Omber Miner - Level 1c">Omber Miner - Level 1</option> <option value="Omber Miner - Level 2c">Omber Miner - Level 2</option> <option value="Omber Miner - Level 3c">Omber Miner - Level 3</option> <option value="Omber Miner - Level 4c">Omber Miner - Level 4</option> <option value="Omber Miner - Level 5c">Omber Miner - Level 5</option> <option value="Omber Miner - Level 6c">Omber Miner - Level 6</option> <option value="Omber Miner - Level 7c">Omber Miner - Level 7</option> <option value="lvl-1 Mission Runner - Level 1c">lvl-1 Mission Runner - Level 1</option> <option value="lvl-1 Mission Runner - Level 2c">lvl-1 Mission Runner - Level 2</option> <option value="lvl-1 Mission Runner - Level 3c">lvl-1 Mission Runner - Level 3</option> <option value="lvl-1 Mission Runner - Level 4c">lvl-1 Mission Runner - Level 4</option> <option value="lvl-1 Mission Runner - Level 5c">lvl-1 Mission Runner - Level 5</option> <option value="lvl-1 Mission Runner - Level 6c">lvl-1 Mission Runner - Level 6</option> <option value="lvl-1 Mission Runner - Level 7c">lvl-1 Mission Runner - Level 7</option> <option value="lvl-2 Mission Runner - Level 1c">lvl-2 Mission Runner - Level 1</option> <option value="lvl-2 Mission Runner - Level 2c">lvl-2 Mission Runner - Level 2</option> <option value="lvl-2 Mission Runner - Level 3c">lvl-2 Mission Runner - Level 3</option> <option value="lvl-2 Mission Runner - Level 4c">lvl-2 Mission Runner - Level 4</option> <option value="lvl-2 Mission Runner - Level 5c">lvl-2 Mission Runner - Level 5</option> <option value="lvl-2 Mission Runner - Level 6c">lvl-2 Mission Runner - Level 6</option> <option value="lvl-2 Mission Runner - Level 7c">lvl-2 Mission Runner - Level 7</option> <option value="lvl-3 Mission Runner - Level 1c">lvl-3 Mission Runner - Level 1</option> <option value="lvl-3 Mission Runner - Level 2c">lvl-3 Mission Runner - Level 2</option> <option value="lvl-3 Mission Runner - Level 3c">lvl-3 Mission Runner - Level 3</option> <option value="lvl-3 Mission Runner - Level 4c">lvl-3 Mission Runner - Level 4</option> <option value="lvl-3 Mission Runner - Level 5c">lvl-3 Mission Runner - Level 5</option> <option value="lvl-3 Mission Runner - Level 6c">lvl-3 Mission Runner - Level 6</option> <option value="lvl-3 Mission Runner - Level 7c">lvl-3 Mission Runner - Level 7</option> <option value="lvl-4 Mission Runner - Level 1c">lvl-4 Mission Runner - Level 1</option> <option value="lvl-4 Mission Runner - Level 2c">lvl-4 Mission Runner - Level 2</option> <option value="lvl-4 Mission Runner - Level 3c">lvl-4 Mission Runner - Level 3</option> <option value="lvl-4 Mission Runner - Level 4c">lvl-4 Mission Runner - Level 4</option> <option value="lvl-4 Mission Runner - Level 5c">lvl-4 Mission Runner - Level 5</option> <option value="lvl-4 Mission Runner - Level 6c">lvl-4 Mission Runner - Level 6</option> <option value="lvl-4 Mission Runner - Level 7c">lvl-4 Mission Runner - Level 7</option> </select> </div> <div id="Staff Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> <label>Which Job? </label> <select id="Staff Sergeant" name="Staff Sergeant"> <option value="">-Choose A Job-</option> <option value="Basic Ore Miner - Level 1d">Basic Ore Miner - Level 1</option> <option value="Basic Ore Miner - Level 2d">Basic Ore Miner - Level 2</option> <option value="Basic Ore Miner - Level 3d">Basic Ore Miner - Level 3</option> <option value="Basic Ore Miner - Level 4d">Basic Ore Miner - Level 4</option> <option value="Basic Ore Miner - Level 5d">Basic Ore Miner - Level 5</option> <option value="Basic Ore Miner - Level 6d">Basic Ore Miner - Level 6</option> <option value="Basic Ore Miner - Level 7d">Basic Ore Miner - Level 7</option> <option value="Plagioclase Miner - Level 1d">Plagioclase Miner - Level 1</option> <option value="Plagioclase Miner - Level 2d">Plagioclase Miner - Level 2</option> <option value="Plagioclase Miner - Level 3d">Plagioclase Miner - Level 3</option> <option value="Plagioclase Miner - Level 4d">Plagioclase Miner - Level 4</option> <option value="Plagioclase Miner - Level 5d">Plagioclase Miner - Level 5</option> <option value="Plagioclase Miner - Level 6d">Plagioclase Miner - Level 6</option> <option value="Plagioclase Miner - Level 7d">Plagioclase Miner - Level 7</option> <option value="Omber Miner - Level 1d">Omber Miner - Level 1</option> <option value="Omber Miner - Level 2d">Omber Miner - Level 2</option> <option value="Omber Miner - Level 3d">Omber Miner - Level 3</option> <option value="Omber Miner - Level 4d">Omber Miner - Level 4</option> <option value="Omber Miner - Level 5d">Omber Miner - Level 5</option> <option value="Omber Miner - Level 6d">Omber Miner - Level 6</option> <option value="Omber Miner - Level 7d">Omber Miner - Level 7</option> <option value="lvl-1 Mission Runner - Level 1d">lvl-1 Mission Runner - Level 1</option> <option value="lvl-1 Mission Runner - Level 2d">lvl-1 Mission Runner - Level 2</option> <option value="lvl-1 Mission Runner - Level 3d">lvl-1 Mission Runner - Level 3</option> <option value="lvl-1 Mission Runner - Level 4d">lvl-1 Mission Runner - Level 4</option> <option value="lvl-1 Mission Runner - Level 5d">lvl-1 Mission Runner - Level 5</option> <option value="lvl-1 Mission Runner - Level 6d">lvl-1 Mission Runner - Level 6</option> <option value="lvl-1 Mission Runner - Level 7d">lvl-1 Mission Runner - Level 7</option> <option value="lvl-2 Mission Runner - Level 1d">lvl-2 Mission Runner - Level 1</option> <option value="lvl-2 Mission Runner - Level 2d">lvl-2 Mission Runner - Level 2</option> <option value="lvl-2 Mission Runner - Level 3d">lvl-2 Mission Runner - Level 3</option> <option value="lvl-2 Mission Runner - Level 4d">lvl-2 Mission Runner - Level 4</option> <option value="lvl-2 Mission Runner - Level 5d">lvl-2 Mission Runner - Level 5</option> <option value="lvl-2 Mission Runner - Level 6d">lvl-2 Mission Runner - Level 6</option> <option value="lvl-2 Mission Runner - Level 7d">lvl-2 Mission Runner - Level 7</option> <option value="lvl-3 Mission Runner - Level 1d">lvl-3 Mission Runner - Level 1</option> <option value="lvl-3 Mission Runner - Level 2d">lvl-3 Mission Runner - Level 2</option> <option value="lvl-3 Mission Runner - Level 3d">lvl-3 Mission Runner - Level 3</option> <option value="lvl-3 Mission Runner - Level 4d">lvl-3 Mission Runner - Level 4</option> <option value="lvl-3 Mission Runner - Level 5d">lvl-3 Mission Runner - Level 5</option> <option value="lvl-3 Mission Runner - Level 6d">lvl-3 Mission Runner - Level 6</option> <option value="lvl-3 Mission Runner - Level 7d">lvl-3 Mission Runner - Level 7</option> <option value="lvl-4 Mission Runner - Level 1d">lvl-4 Mission Runner - Level 1</option> <option value="lvl-4 Mission Runner - Level 2d">lvl-4 Mission Runner - Level 2</option> <option value="lvl-4 Mission Runner - Level 3d">lvl-4 Mission Runner - Level 3</option> <option value="lvl-4 Mission Runner - Level 4d">lvl-4 Mission Runner - Level 4</option> <option value="lvl-4 Mission Runner - Level 5d">lvl-4 Mission Runner - Level 5</option> <option value="lvl-4 Mission Runner - Level 6d">lvl-4 Mission Runner - Level 6</option> <option value="lvl-4 Mission Runner - Level 7d">lvl-4 Mission Runner - Level 7</option> </select> </div> <div id="Senior Master Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> <label>Which Job? </label> <select id="Senior Master Sergeant" name="Senior Master Sergeant"> <option value="">-Choose A Job-</option> <option value="Basic Ore Miner - Level 1e">Basic Ore Miner - Level 1</option> <option value="Basic Ore Miner - Level 2e">Basic Ore Miner - Level 2</option> <option value="Basic Ore Miner - Level 3e">Basic Ore Miner - Level 3</option> <option value="Basic Ore Miner - Level 4e">Basic Ore Miner - Level 4</option> <option value="Basic Ore Miner - Level 5e">Basic Ore Miner - Level 5</option> <option value="Basic Ore Miner - Level 6e">Basic Ore Miner - Level 6</option> <option value="Basic Ore Miner - Level 7e">Basic Ore Miner - Level 7</option> <option value="Plagioclase Miner - Level 1e">Plagioclase Miner - Level 1</option> <option value="Plagioclase Miner - Level 2e">Plagioclase Miner - Level 2</option> <option value="Plagioclase Miner - Level 3e">Plagioclase Miner - Level 3</option> <option value="Plagioclase Miner - Level 4e">Plagioclase Miner - Level 4</option> <option value="Plagioclase Miner - Level 5e">Plagioclase Miner - Level 5</option> <option value="Plagioclase Miner - Level 6e">Plagioclase Miner - Level 6</option> <option value="Plagioclase Miner - Level 7e">Plagioclase Miner - Level 7</option> <option value="Omber Miner - Level 1e">Omber Miner - Level 1</option> <option value="Omber Miner - Level 2e">Omber Miner - Level 2</option> <option value="Omber Miner - Level 3e">Omber Miner - Level 3</option> <option value="Omber Miner - Level 4e">Omber Miner - Level 4</option> <option value="Omber Miner - Level 5e">Omber Miner - Level 5</option> <option value="Omber Miner - Level 6e">Omber Miner - Level 6</option> <option value="Omber Miner - Level 7e">Omber Miner - Level 7</option> <option value="lvl-1 Mission Runner - Level 1e">lvl-1 Mission Runner - Level 1</option> <option value="lvl-1 Mission Runner - Level 2e">lvl-1 Mission Runner - Level 2</option> <option value="lvl-1 Mission Runner - Level 3e">lvl-1 Mission Runner - Level 3</option> <option value="lvl-1 Mission Runner - Level 4e">lvl-1 Mission Runner - Level 4</option> <option value="lvl-1 Mission Runner - Level 5e">lvl-1 Mission Runner - Level 5</option> <option value="lvl-1 Mission Runner - Level 6e">lvl-1 Mission Runner - Level 6</option> <option value="lvl-1 Mission Runner - Level 7e">lvl-1 Mission Runner - Level 7</option> <option value="lvl-2 Mission Runner - Level 1e">lvl-2 Mission Runner - Level 1</option> <option value="lvl-2 Mission Runner - Level 2e">lvl-2 Mission Runner - Level 2</option> <option value="lvl-2 Mission Runner - Level 3e">lvl-2 Mission Runner - Level 3</option> <option value="lvl-2 Mission Runner - Level 4e">lvl-2 Mission Runner - Level 4</option> <option value="lvl-2 Mission Runner - Level 5e">lvl-2 Mission Runner - Level 5</option> <option value="lvl-2 Mission Runner - Level 6e">lvl-2 Mission Runner - Level 6</option> <option value="lvl-2 Mission Runner - Level 7e">lvl-2 Mission Runner - Level 7</option> <option value="lvl-3 Mission Runner - Level 1e">lvl-3 Mission Runner - Level 1</option> <option value="lvl-3 Mission Runner - Level 2e">lvl-3 Mission Runner - Level 2</option> <option value="lvl-3 Mission Runner - Level 3e">lvl-3 Mission Runner - Level 3</option> <option value="lvl-3 Mission Runner - Level 4e">lvl-3 Mission Runner - Level 4</option> <option value="lvl-3 Mission Runner - Level 5e">lvl-3 Mission Runner - Level 5</option> <option value="lvl-3 Mission Runner - Level 6e">lvl-3 Mission Runner - Level 6</option> <option value="lvl-3 Mission Runner - Level 7e">lvl-3 Mission Runner - Level 7</option> <option value="lvl-4 Mission Runner - Level 1e">lvl-4 Mission Runner - Level 1</option> <option value="lvl-4 Mission Runner - Level 2e">lvl-4 Mission Runner - Level 2</option> <option value="lvl-4 Mission Runner - Level 3e">lvl-4 Mission Runner - Level 3</option> <option value="lvl-4 Mission Runner - Level 4e">lvl-4 Mission Runner - Level 4</option> <option value="lvl-4 Mission Runner - Level 5e">lvl-4 Mission Runner - Level 5</option> <option value="lvl-4 Mission Runner - Level 6e">lvl-4 Mission Runner - Level 6</option> <option value="lvl-4 Mission Runner - Level 7e">lvl-4 Mission Runner - Level 7</option> </select> </div> <div class="clear"></div><div id="error-message-style-sub-1"></div></div>As I stated, neither of the javascript codes in the above examples are working for me, and I am quite new to javascript (and not overly experienced in HTML either) so any suggestions?
Additionally, once the user makes a selection in the second dropdown box, I want a unique line of text (i.e. unique to their selection) to display underneath the dropdown box. Here's an example I found:
Toggle a hidden div when a particular dropdown option is selected/de-selected
However, again, unlike this exaple I don't want just one option to display text; I want a different line of text to display for any and every option selected. How would I go about modifying the code in this example to make that work?
I know this will likely turn out to be a large project, so don't worry about typing out everything for me if you can just give me a sample of what I have to do to modify the code so that it'll affect more than just one option. As you can probably guess by the size of this post, I am quite comfortable myself with writing to great lengths.
Any help would be much appreciated.
Thanks in advance.
-
pyvi almost 13 yearsThe second example really should be working... Do you have JavaScript enabled for jsfiddle?
-
Scott almost 13 yearsI meant it doesn't work for me when I use the javascript with my own HTML above (even in jsfiddle). It does work fine when I simply run the given example as-is.
-
-
Felan almost 13 yearsThis is also an easier solution to maintain long term. Large sets of selects in web pages that get toggled on or off can be a bit much digest for other people that have to work on the web page afterwards.
-
Scott almost 13 yearsThanks a lot, Matt, this looks exactly like what I need!
-
Scott almost 13 yearsI'm not familiar with AJAX, but thanks for your reply, I'll look into it and see what I can come up with.
-
Scott almost 13 yearsActually, one last thing; I'm wanting the unique-line-of-text to display for each option in the second dropdown, not the first (i.e. "Line of text for Airman stuff," "Line of text for Senior Airman Stuff," etc., not "Line of text for Airman"), and I only want it to display after an option in the second dropdown is selected. I tried just changing the classes in your first container to "airman-stuff" etc. and then adding matching values in the "Airman Stuff" <option> tag but that didn't do the trick. Will I need to name that container something else and then edit the javascript somehow?
-
Scott almost 13 yearsWorks like a charm. :) Thanks again Matt, that taught me a lot.
