asked on

Populating dropdown lists using jquery

I Have one drop down list containing the elements {A,B,C,D,E,F}
I want to populate the other drop down list on the basis of slection of index in the first drop down list.
The problem is that if I need to do this in the Selected index change event ofthe first drop down list. I need to make auto postback is equal to true.
Which I do not want to do it.
I want to have this functionality to be implemented using jquery.(that is on the client side)

Steve Krile

Here is a little code sample to handle all of this on the client side using Jquery.

If you want to get your list data from a service, you will want to use the .get() method in jquery, but the principals will be the same.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Overlay Goodness</title>
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <style>
		html, body
		{

			font-family: Arial, Arial Unicode MS;
			font-size: .95em;
			height: 100%;
			width: 100%;
			border: 0;
			padding: 20px;
			margin: 0;
			font-weight:normal;
		}

    </style>
</head>
<body>

	<select id="departments"></select>
	<select id="jobs"></select>
	<script>
		var DDdata = [
		{
		"department": "IT",
		"jobs": [
		        {"title":"Programmer"},
		        {"title":"Solutions Architect"},
		        {"title":"Database Developer"}
		        ]
		},
		{"department": "Accounting",
		"jobs": [
			    {"title":"Accountant"},
			    {"title":"Payroll Officer"},
			    {"title":"Accounts Clerk"},
			    {"title":"Analyst"},
			    {"title":"Financial Controller"}
			    ]
		},
		{
		"department": "HR",
		"jobs": [
			    {"title":"Recruitment Consultant"},
			    {"title":"Change Management"},
			    {"title":"Industrial Relations"}
			    ]
		},
		{
		"department": "Marketing",
		"jobs": [
			    {"title":"Market Researcher"},
			    {"title":"Marketing Manager"},
			    {"title":"Marketing Co-ordinator"}
			    ]
		}
		]

		$(document).ready(function(){
			//set the first value to Select
			var options_departments = '<option>Select<\/option>';

			//loop through the data to create the departments in the select
			$.each(DDdata, function(i,d){
				options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
			});

			//add the options to the departments dropdown
			$("select#departments", this).html(options_departments);

			//wire up a CHANGE function to the departments drop down
			$("select#departments", this).change(function(){
				//get the currently selected index
				var index = $(this).get(0).selectedIndex;

				//get the corresponding index in your JSON data
				var d = DDdata[index-1];  // -1 because index 0 is for empty 'Select' option

				//reset your options HTML for the Job menu
				var options = '';

				//provided the user has selecting something other than the first choice...
				if (index > 0) {
					//loop through the matching jobs list
					$.each(d.jobs, function(i,j){
								options += '<option value="' + j.title + '">' + j.title + '<\/option>';
					});
				} else {
					options += '<option>Select<\/option>';
				}
				$("select#jobs").html(options);
			})

		})
	</script>

</body>



</html>