Storegaard
asked on
JQuery - How to make one select change values in other select options
Hi, I am having difficulties trying to get one selected option to only show the needed values in another select/option box.
Example below: Select "Pineapple" in the first, and get the options with value=3 (yellow colors).
Any ideas?
<select name="entryPlant" id="entryPlant" class="{validate:{required :true, messages:{required:'Select one option'}}}">
<option>Please select...</option>
<option value="1">Orange</option>
<option value="2">Tomato</option>
<option value="3">Banana</option>
<option value="4">Cucumber</option >
<option selected value="3">Pineapple</optio n>
</select>
<select name="chosen" id="thisChosen">
<option value="1">Carrot</option>
<option value="1">Orange</option>
<option value="2">Red</option>
<option value="3">Yellow</option>
<option value="3">Light yellow</option>
<option value="3">Dark yellow</option>
<option value="4">Green</option>
</select>
Thanks
Jesper
Example below: Select "Pineapple" in the first, and get the options with value=3 (yellow colors).
Any ideas?
<select name="entryPlant" id="entryPlant" class="{validate:{required
<option>Please select...</option>
<option value="1">Orange</option>
<option value="2">Tomato</option>
<option value="3">Banana</option>
<option value="4">Cucumber</option
<option selected value="3">Pineapple</optio
</select>
<select name="chosen" id="thisChosen">
<option value="1">Carrot</option>
<option value="1">Orange</option>
<option value="2">Red</option>
<option value="3">Yellow</option>
<option value="3">Light yellow</option>
<option value="3">Dark yellow</option>
<option value="4">Green</option>
</select>
Thanks
Jesper
ASKER
Thank you mplungjan for your answer.
You are absolutely right, the carrot has nothing to do in the second select/option.
I am not sure how to implement what you are suggesting. Could you be more specific in regards to the <select> and <option> code.
Thanks again.
You are absolutely right, the carrot has nothing to do in the second select/option.
I am not sure how to implement what you are suggesting. Could you be more specific in regards to the <select> and <option> code.
Thanks again.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, I can see the demo Works perfectly, but why do you think the second option doesnt initialize on my end?
The select only shows "Select an Option", with no colors in it - no options.
(scratching my head)
The select only shows "Select an Option", with no colors in it - no options.
(scratching my head)
ASKER
I noticed that the "jquery-git" has to be included, I used JQuery 1.7.1 which doesn't Work. I think I got it now, - I will be back :-)
ASKER
I think its about to get right.
Only one thing (hope your're up for it) :-)
Lets say that this is the options in select1
<option value="0">Please select...</option>
<option value="2">Orange</option>
<option value="6">Tomato</option>
<option value="9">Banana</option>
<option value="11">Cucumber</optio n>
<option selected value="13">Pineapple</opti on>
Notice the values above (these values are defined and can't be changed).
Because of the users "credentials" he/she are only presented with these fruits or vegetables. Others might see different options. So because the order is not 0,1,2,3,4 and so on, how do we get it to present this :
0 .... ["Please select from the other"],
2 .... ["orange"],
6 .... ["red"],
9 .... [ "yellow","light yellow","dark yellow" ],
11 ... ["green"]
I know this is tiresome, but I so hope you can help.
Only one thing (hope your're up for it) :-)
Lets say that this is the options in select1
<option value="0">Please select...</option>
<option value="2">Orange</option>
<option value="6">Tomato</option>
<option value="9">Banana</option>
<option value="11">Cucumber</optio
<option selected value="13">Pineapple</opti
Notice the values above (these values are defined and can't be changed).
Because of the users "credentials" he/she are only presented with these fruits or vegetables. Others might see different options. So because the order is not 0,1,2,3,4 and so on, how do we get it to present this :
0 .... ["Please select from the other"],
2 .... ["orange"],
6 .... ["red"],
9 .... [ "yellow","light yellow","dark yellow" ],
11 ... ["green"]
I know this is tiresome, but I so hope you can help.
Like this
var colours={
"Please select...":["Select something from the other first"],
"Orange":["orange"],
"Tomato":["red"],
.
.
.
"Cucumber":["green"]
}
//Notice no comma after the last.
Then change
$.each(colours[$(this).val ()],functi on ...
to
var text = $("option:selected",this). text();
$.each(colours[text],funct ion...
var colours={
"Please select...":["Select something from the other first"],
"Orange":["orange"],
"Tomato":["red"],
.
.
.
"Cucumber":["green"]
}
//Notice no comma after the last.
Then change
$.each(colours[$(this).val
to
var text = $("option:selected",this).
$.each(colours[text],funct
I see two 3s in the first select so will either of them show only yellow colours in the second? What is carrot doing in the second select?
You are better off writing an object array and fill it each time
var colours = {
0:["Please select from the other"],
1: ["orange"],
2: ["red"],
3: [ "yellow","light yellow","dark yellow" ],
4: ["green"]
}
$(function() {
$("#entryPlant").on("chang
var $sel=$("#thisChosen")
$sel.empty();
$.each(colours[$(this).val
$sel.append('<option value="'+val+'">'+val+'</o
});
});
});