Jquery script to take select option and make API call with parameter

abperfecto
abperfecto used Ask the Experts™
on
Hi,

I have a html select drop down with a list of countries.
Want I need is for when I select a country, it takes the value and envokes a call to my webapp 'search/city.view?value={select box value}' which then populates an empty city select drop down.
Im using jQuery JavaScript Library v1.3.1 - I know it's out dated but its used throughout the site at the moment and to change would be time consuming at the moment, there is plans to down the line.

Many thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
jQuery's load function was around in version 1.3. I wonder if that worked well.

If you had selects of id country and city then the following might work:

$('#country').change(function(){
  $('#city').load('search/city.view?value='+$(this).val());
}

Open in new window


if search/city.view?value=UK returned the following html:

<option value="London">London</option>
<option value="Glasgow">Glasgow</option>
...etc

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
What format is the data returned by your city.view script?

Author

Commented:
This is an example...

<?xml version="1.0" encoding="UTF-8"?>
<list lang="en" datalang="en" countrycode="AU">
  <item value="0">Please select</item>
  <item value="ADL">Adelaide</item>
  <item value="EPZ">Alexandra Headland</item>
  <item value="ASP">Alice Springs</item>
  <item value="EPV">Apollo Bay</item>
  <item value="AYQ">Ayers Rock</item>
  <item value="BNE">Brisbane</item>
  <item value="BME">Broome</item>
  <item value="QYN">Byron Bay</item>
  <item value="CNS">Cairns</item>
  <item value="CUD">Caloundra</item>
  <item value="CBR">Canberra</item>
  <item value="DRW">Darwin</item>
  <item value="EXW">Dunsborough</item>
  <item value="EXZ">Fraser Island</item>
  <item value="OOL">Gold Coast</item>
  <item value="EYJ">Halls Gap</item>
  <item value="HVB">Hervey Bay</item>
  <item value="HBA">Hobart</item>
  <item value="KNX">Kununurra</item>
  <item value="LST">Launceston</item>
  <item value="FFG">Lorne</item>
  <item value="FGP">Magnetic Island</item>
  <item value="MEL">Melbourne</item>
  <item value="MJK">Monkey Mia</item>
  <item value="PER">Perth</item>
  <item value="PTI">Port Douglas</item>
  <item value="RTS">Rottnest Island</item>
  <item value="FKU">Scarborough</item>
  <item value="MCY">Sunshine Coast</item>
  <item value="SYD">Sydney</item>
  <item value="TMW">Tamworth</item>
  <item value="GZC">Whitsundays</item>
</list>
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Assume you have a select box with an id of country and an empty one with an id of city. This code should do the job.

$(document).ready(function() {
	$('#country').change(function(){
		$.ajax({
			type: "GET",
			url: "search/city.view?value="+$(this).val(),
			dataType: "xml",
			success: function(xml) {
		 		$(xml).find('item').each(function(){
		 			var value = $(this).attr('value');
		 			var city = $(this).text();
					$('#city').append($('<option></option>').val(value).html(city));
				});
			}
		});	
	});
});

Open in new window

Information Systems Manager
Top Expert 2012
Commented:
try something like:

$(document).ready(function(){
  $('#country').change(function(){
    var url="search/city.view?value="+$(this).val();
    $.ajax({
      type: "GET",
      url: url,
      dataType: "xml",
      success: function(xml){
        $('#city').html("");
        $(xml).find("item").each(function(){
          $("#city").append("<option value=\""+$(this).attr("value") + "\">"+$(this).text()+"</option>");
        });
      }
    });
  }
});

Open in new window


Good Luck

Jon
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
Sorry Chris,

Our answers seem to have crossed over, the main difference between the two is that my code doesn't assume that the city select is empty.

Jon
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
No worries - often happens.

I think it's fair to assume that's the way to do it though :)

Author

Commented:
Many thanks to both of you for your time and thought.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial