Geek Answers Handbook

Change options in a selection box based on various selection options

I have 2 choices. I want to change the dropdown options in the second choices based on what I select in the first choices. How to do this in jquery?

<select id="Manage"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <select>

Second choice if A is selected from the first choice

 <select id='selectA'> <option value="1">1</option> <option value="2">2</option> </select>

Now, if B is selected from the first choice option

 <select id='selectA'> <option value="3">3</option> <option value="4">4</option> </select>
+7
jquery html select options
source share
2 answers

Something like:

 $('#Manage').change(function() { var options = ''; if($(this).val() == 'a') { options = '<option value="1">1</option><option value="2">2</option>'; } else if ($(this).val() == 'b'){ options = '<option value="3">3</option><option value="4">4</option>'; } $('#selectA').html(options); });

Of course, you may have your options, for example. stored in an array and combine them on the fly or something else that is up to you.

Link: .change() , .val()

+8
source share

You can do this using three different methods:

  • You load options for the second choice with AJAX as soon as the first one is selected
  • You save all the parameters for the second selection in the JSON object and then turn it on after the first one has been selected.
  • You predefine all select and show / hide AND disable / enable another selection

The first is probably the best, since you can get values ​​from the database depending on the choice of the fisrt user, and you can create a server to select holes.

+3
source share

More articles:


All Articles