JQuery: Ajax Example of Select Values Filled Dynamically

This Ajax example will give you an idea of, how to present users a dynamic data based on input using Ajax method. I will use jQuery JavaScript library for this linked select lists example. Dynamically Populate Select List by Ajax is an example using plain JavaScript code. Suppose a user has selected a type and based on that type you want to present them some data. This can be cities of a selected country or names based on user input.
Ajax data pulling based on selection is required due to large chunk of data you need to pull at a time if you want to have all the data present on page for selection. Ajax based linked select lists enhance user experience.

Example script: Select values dynamically filled with Ajax using JQuery lib

<html>
<head> <title>Select cities for selected country </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="jquery-1.3.2.js" type="text/javascript"></script>
   <script>
function dynamic_Select(ajax_page, country)
{
$.ajax({
type: "GET",
url: ajax_page,
data: "ch=" + country,
dataType: "text/html",
success: function(html){       $("#txtResult").html(html);     }
  }); }
</script>
</head>
<body>
<form method="post">
<select name="country" onchange="dynamic_Select('city.php', this.value)" />
<option value="#">-Select-</option>
<option value="India">India</option>
<option value="USA">USA</option>
</select>
<br><br>
<div id="txtResult">
<select name="cityList">
<option></option>
</select>
</div><br>
</form>
</body></html>
Page: city.php
This is page from where data is sent for country.The data can come from database or any other form. Here for sake of simplicity , I will have my data here in php array.
PHP script for city.php is same as of Dynamically Populate Select List by Ajax. Here I have used JQuery JavaScript library instead of plain JavaScript.
  • # 1 - by Mahesh

    Can you post a demo link? Thanks.

  • # 2 - by Satya Prakash

    No, I do not have now. What is wrong ?
    Just try a little bit and you will see it working

  • # 3 - by Satya Prakash

    No, I do not have now. What is wrong ?
    Just try a little bit and you will see it working

  • # 4 - by yoru

    should i echo the values at the city.php page?

  • # 5 - by yoru

    should i echo the values at the city.php page?

Comments are open for an year period. Please, write here on Facebook page.