JQuery: Ajax Example of Select Values Filled Dynamically

Aug 13th, 2009
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.

 

 

Possibly Related posts:

blog comments powered by Disqus