CODEWITHSUNDEEP
javascriptphpjqueryajax
Daniel
Daniel

Reputation: 376

jQuery & Ajax - Load items to a select input when page loads

I have 2 <select> inputs:

<select id="state">
  <option value="" selected>Select</option>
  <option value="california">California</option>
  <option value="new-york">New York</option>
</select>

<select id="city">
  <option value="">Select</option>
</select>

And the jQuery/AJAX code:

$('#state').change(function() {
    var id=$(this).val();
    var dataString = 'state='+id;
    $.ajax({
        type: 'POST',
        url: scriptpath+'../ajax/fields.php',
        data: dataString,
        cache: false,
        success: function(output) {
            $('#city').html(null);
            $('#city').append(output);
        },
    });
});

Explanation: Everything works fine. The #city input changes depending on the #state input value... Now if I load the page having "california" as the default value -- the #city input doesn't change since it's using the .change() event. How do I detect the selected value on the #state input when the page loads?

I've tried $('#state').on("change load",function() { without success.

Any ideas? Thanks in advance

Upvotes: 1

Views: 3383

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

Just trigger the change event when first page loads:

$('#state').change(function() {
    //your code...
}).change();//trigger on page load

Upvotes: 2

Related Questions