Solved

JQuery - How to make one select change values in other select options

Posted on 2013-06-12
7
300 Views
Last Modified: 2013-06-25
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</option>
</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
0
Comment
Question by:Storegaard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39242664
Not completely sure what you want

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("change",function() {
    var $sel=$("#thisChosen")
    $sel.empty();
    $.each(colours[$(this).val()],function(i,val)) {
      $sel.append('<option value="'+val+'">'+val+'</option>');
    });
  });
});
0
 

Author Comment

by:Storegaard
ID: 39244938
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.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 100 total points
ID: 39244999
This works - note the 0 value on the first entry and that I simplified the array

DEMO

var colours = [
["Please select from the other"],
["orange"],
["red"],
[ "yellow","light yellow","dark yellow" ],
["green"]
];
$(function() {
  $("#entryPlant").on("change",function() {
    var $sel=$("#thisChosen");
    console.log("bla")
    $sel.empty();
    $.each(colours[$(this).val()],function(i,val) {
        
      $sel.append('<option value="'+val+'">'+val+'</option>');
    });
  });
  $("#entryPlant").change(); // initialise
}); 

Open in new window

<select name="entryPlant" id="entryPlant" class="{validate:{required:true, messages:{required:'Select one option'}}}">
<option value="0">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</option>
</select>

<select name="chosen" id="thisChosen">
</select>

Open in new window

0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

Author Comment

by:Storegaard
ID: 39245038
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)
0
 

Author Comment

by:Storegaard
ID: 39245079
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 :-)
0
 

Author Comment

by:Storegaard
ID: 39245662
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</option>
<option selected value="13">Pineapple</option>

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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39245785
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()],function ...
to
var text = $("option:selected",this).text();
$.each(colours[text],function...
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you mig…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question