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.
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.
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.
Can you post a demo link? Thanks.
No, I do not have now. What is wrong ?
Just try a little bit and you will see it working
No, I do not have now. What is wrong ?
Just try a little bit and you will see it working
should i echo the values at the city.php page?
should i echo the values at the city.php page?