jQuery <select> Changes Another <select>

Question

I am using trying to use jQuery .change() to create two <select> elements whereby the first <select id="state"> is for generating a list of states and the second <select id="city"> is to generate a list of cities.

The values of states and cities will not be hard-coded but generated from values pass from web services.

The list of options to be generated is supposed to work like this: if user selects state from <select id="state"> the selected value will be pass to a web service to retrieve the list to generate the <select id="city"> for cities.

I'm really not sure how to implement this. Can anyone please advise me?

Community · Accepted Answer · 2017-05-23 10:28:31Z

it should look something like

$(function(){ // populate the states list from Ajax $.ajax( { url:"/listStates", type:"GET", success:function( data ) { var statesList = data; if ( typeof(data) == "string" ){ statesList = JSON.parse(data); } $.each( statesList, function( index, state ){ $("#state").append($("<option></option>",{value:state.value, text:state.label}); }); }, error:function( result ) { console.log(["error getting states",result]); } }); // register on state list change $("#state").change( function(){ // on change dispatch an AJAX request for cities and populate cities $.ajax({ url : "/listCities", data : {"state": $("#state").val() }, type:'GET', success:function( data ) { var citiesList = data; // assuming list object if ( typeof(data) == "string"){ // but if string citiesList = JSON.parse( data ); } $("#city").empty(); $.each(citiesList, function(index,city){ $("#city").append($("<option></option>", {"value":city.value, "text":city.label})); } }, error:function( result ){ console.log(["error", result]); } }) });

This can get you started however I did not follow lint best practices here.

Walk Through

I register for a "change" event on select with id state.
When a change if fired, I invoke an Ajax request to location "/listCities"
I assume this location is called with a "GET" method
I pass along the state that is currently selected - so the server will know which cities to list.
If the Ajax through an error, I log the error to the console.
If the Ajax was a success, I populate the select with id "city" with options containing values for each city and a label.

I assumed the following things while writing the code

You have a route GET /listCities that expects a state.
The response from that route is a JSON containing a list of values and labels for each city. Something like this :

[{ value : "AM" , label : "Amsterdam" }, .... ]

The only things you may need to read about for this example are :

If you have any questions, please comment my response, I will be happy to explain/add/modify

Thank you so much for the explaining how it works. Couldn't wait to try it out.
can you check this out stackoverflow.com/questions/28038190/… and point out a possible solution?

Jai · Accepted Answer · 2013-02-02 12:14:16Z

You have to follow some steps achieving this:

first when page load populate the first country list via ajax (my assumption)
then create a .change() event with the country list
This will send a request and returns the states list response as per selected country.

you can try test it this way:

$(function(){ $.ajax({ url:your url, type: 'post', dataType: 'json', // or your choice of returned data success: function(data){ $.each(data, function(i, v){ $('<option value="'+v.name+'">'+v.text+'</option>').appendTo('#country'); }); } }); $('#country').change(function(){ $.ajax({ url:your url, type: 'post', dataType: 'json', // or your choice of returned data success: function(states){ $.each(states, function(i, stt){ $('<option value="'+stt.name+'">'+stt.text+'</option>').appendTo('#states'); }); } }); $('#states').empty(); }); });

you should clear the second select after the change. $('#city').empty()

Lix · Accepted Answer · 2013-02-02 11:46:11Z

Pretty simple - all you'll have to do is have the two dropdowns, one with the full lists of states and the second (empty) city list will contain only one blank disabled option.

As soon as your states dropdown triggers a change event, you extract the state data and send it via an AJAX call to your server or some web service which will return a list of cities in that state.

You'll then populate the second dropdown with the returned city values.

Collectives™ on Stack Overflow

jQuery <select> Changes Another <select>

3 Answers 3

Walk Through

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Walk Through

2 Comments

1 Comment

Comments

Linked

Related