Set Select Option Using Jquery

Question

I have three select boxes of Country, State, City

<select name="property_country" id="country" > 
  <option value="">Country</option>
</select>

<select name="property_state" id="state" > 
  <option value="">State</option>
</select>

<select name="property_city" id="city"> 
  <option value="">City</option>
</select>

PHP is filling the country, Ajax is filling the State and City fields, no problems there. I have two countries in the database - India and USA.

If I select India, ajax gives the state correctly. But if I reselect option label "Country" then state and city fields go blank. I need jQuery code to fill the default labels and values as given above "State" and "City" if no country is selected (meaning "Country") is selected.

This can be done via database by filling in State and City entries and attaching them to Country and then onload (body or javascript) upload the default values. But that will make the validation work also patchwork and not a logical flow. Hence the requirement of jQuery solution.

My jQuery Code is below:

$(document).ready(function() {
  $('#country').on('change', function() {
    var country_id = $('#country').val();
    $.ajax({
      type: 'POST',
      url: '../controllers/select.php',
      data: "country_id=" + country_id,
      success: function(msg) {
        $("#state").html(msg);
      }
    });
  });

  $('#state').on('change', function() {
    var state_id = $('#state').val();
    $.ajax({
      type: 'POST',
      url: '../controllers/select.php',
      data: "state_id=" + state_id,
      success: function(msg) {

        $("#city").html(msg);
      }
    });
  });

I tried

if (country_id == "") {
    $("#state").val("State");               
} else {    
    $.ajax({});
}

You can reset the value of the select field like $('#state').val('') — Indranil Mondal
– Indranil Mondal, Commented Sep 7, 2016 at 12:53
You can check on the server side about the country id. If country id blank then you need to send all the states. If country id sent (ex. 10) then you need to send states which have country_id = 10. Same thing for states. — Mohit Tanwani
– Mohit Tanwani, Commented Sep 7, 2016 at 13:02
Here you're adding options as $("#city").html(msg); So the blank city option not there once you get options from ajax. So option is if there is no options what you need to do is : $("#city").html(' <option value="">State</option>'); and then do $("#city").val('') — Indranil Mondal
– Indranil Mondal, Commented Sep 7, 2016 at 13:32

Indranil Mondal · Accepted Answer · 2016-09-07 13:37:57Z

2

You have to again add the blank option the select field again if country value is reset.

$('#country').on('change', function() {
var country_id = $('#country').val();
if(country_id){
  $.ajax({
    type: 'POST',
    url: '../controllers/select.php',
    data: "country_id=" + country_id,
    success: function(msg) {
      $("#state").html(msg);
    }
   });
  }
  else{
    $("#state").html(' <option value="">State</option>'); 
    $("#city").html(' <option value="">City</option>'); 
  }
});

answered Sep 7, 2016 at 13:37

Indranil Mondal

2,8673 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DragonFire Over a year ago

there is one other problem with my code - when I select the country, the state updates, but not the cities. How can I get the entire chain ie. State and City (of the state) to update when Country is selected.

Indranil Mondal Over a year ago

How that chain is possible? You select country it loads the states and then again you've to select the state then only another ajax call will be made and the city will be loaded. So want the first state in the selectfield will be automatically selected?

DragonFire Over a year ago

Currently the state is getting selected automatically when I select the country. So like you said better option would be that when i select the country it should show the states of that country (but first option should be select states - which currently it is not - state getting selected automatically), then once the state is selected it should give a list of cities of that state but first option can be select city (currently city is getting selected automatically)... sorry for the trouble i am new to javascript/jquery/ajax....

Indranil Mondal Over a year ago

After the line $("#state").html(msg); in success of the ajax write this line $("#state").val($("#state option:eq(0)").val());

DragonFire Over a year ago

ok got it, that has to be done via php by inserting <option value="">State</option> and fetching it via ajax and showing it as a default field....

|

Collectives™ on Stack Overflow

Set Select Option Using Jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related