JQuery <select> Changes Another <select>
I am trying to use jQuery .change()
to create two <select>
elements where the first <select id="state">
is for creating a list of states and the second <select id="city">
is for creating a list of cities.
State and city values will not be hardcoded, but generated from values passed from web services.
The configurable list should work like this: if the user selects a state from <select id="state">
, the selected value will be passed to the web service to retrieve the list to generate <select id="city">
for cities.
I'm really not sure how to implement this. Can anyone advise me?
it should look something like this:
$(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 might get you started, but I haven't followed the best practices here.
Pass the
- I am registering for a "change" event on select with state id.
- On change, if it was started, I make an Ajax request to the "/ listCities" address
- I am assuming this place is called with the "GET" method
- I am passing in the currently selected state, so the server will know which cities to list.
- If Ajax via error, I log the error to the console.
- If the Ajax was successful, I populate the select with the id "city" with parameters containing the values for each city and a label.
I was taking the following things while writing code
- You have a GET / listCities route that expects state.
-
The response from this route is JSON containing a list of values and labels for each city. Something like that:
[{ value : "AM" , label : "Amsterdam" }, .... ]
The only thing you might need to read for this example is:
- JQuery Ajax Calls
- Best practice to populate a list with JQuery
If you have any questions, please comment on my answer, I will be happy to explain / add / change
You must follow these steps to achieve this:
- first when the page load fills the first list of countries via ajax (my guess)
- then create event
.change()
with list of countries - This will send a request and return a status list response according to the selected country.
you can try to test it like this:
$(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();
});
});
Pretty simple - all you have to do is have two dropdowns: one with full lists of states, and the second (empty) list of cities will only contain one empty disabled option.
Once the state dropdown fires the event change
, you retrieve the state data and send it via an AJAX call to your server or some web service that will return a list of cities in that state.
Then you will write a second dropdown with the city returned values.