Question

I have a select menu with a list of country names. I’m using jquery to get the value of the currently selected option. I’m appending this to the url of the remote source file that I am using to populate the autocomplete field.

I need to update the value of the select menu within the function onchange of the country select menu. Currently it uses the value of the select menu when the page is first loaded.

I’m trying to have it reevaluate the value onchange as to alter the results of the mysql query I am trying to run on the remote page.

<script type="text/javascript">

  $(function() {

  $('#from_country').val("");

  $("#city").autocomplete({
    source: "json-list.php?country=" + $( "#from_country" ).val(),
    minLength: 3,
    select: function(event, ui) {
      $('#from_zip').val(ui.item.postal_code);
    }
  });
});

</script>

<select name="from_country"  id="from_country" >
  <option value='US'>United States</option>
  <option value='AU'>Australia</option>
</select>

Answer 1

You can use change event handler:

$('#from_country').change(function(){
  var val = this.value;
  $("#city").autocomplete({
    source: "json-list.php?country=" + val,
    minLength: 3,
    select: function(event, ui) {
      $('#from_zip').val(ui.item.postal_code);
    }
  });
}).change()