Json Selectbox Load Problem

See more:

jQuery

JSON

Hi;

When I click on the department to install the subject, the services to install when I click on the subject. But matters did not see when I click on services. I think it is inaccurate to describe the json. Can you help me with this. Thank you.

Jquery Code;

/* <![CDATA[ */

(function($) {

$.fn.changeType = function(){

	var data = [
		{
		"department": "IT",
		"subject": [
		        {"title":"Programmer",
		        "services":[
			        {"name":"example1"},
					{"name":"example2"}
		        ]
		        },
		        {"title":"Solutions Architect"},
		        {"title":"Database Developer"}
		        ]
		},
		{"department": "Accounting",
		"subject": [
			    {"title":"Accountant"},
			    {"title":"Payroll Officer"},
			    {"title":"Accounts Clerk"},
			    {"title":"Analyst"},
			    {"title":"Financial Controller"}
			    ]
		},
		{
		"department": "HR",
		"subject": [
			    {"title":"Recruitment Consultant"},
			    {"title":"Change Management"},
			    {"title":"Industrial Relations"}
			    ]
		},
		{
		"department": "Marketing",
		"subject": [
			    {"title":"Market Researcher"},
			    {"title":"Marketing Manager"},
			    {"title":"Marketing Co-ordinator"}
			    ]
		}
		]

		var options_departments = '<option>Select<\/option>';
		$.each(data, function(i,d){
			options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
		});
		$("select#departments", this).html(options_departments);

		$("select#departments", this).change(function(){
			var index = $(this).get(0).selectedIndex;
			var d = data[index-1];  // -1 because index 0 is for empty 'Select' option
			var options = '';
			if (index > 0) {
				$.each(d.subject, function(i,j){
		                    options += '<option value="' + j.title + '">' + j.title + '<\/option>';
				});
			} else {
				options += '<option>Select<\/option>';
			}
			$("select#subject").html(options);
		})
		
		$("select#subject", this).change(function(){
			var index = $(this).get(0).selectedIndex;
			var j = d[index-1];  // -1 because index 0 is for empty 'Select' option
			var options = '';
			if (index > 0) {
				$.each(j.services, function(i,b){
		                    options += '<option value="' + b.name + '">' + b.name + '<\/option>';
				});
			} else {
				options += '<option>Select<\/option>';
			}
			$("select#services").html(options);
		})
		
};





})(jQuery);

$(document).ready(function() {
	$("form#search").changeType();
});

/*  */

My html code;

<form id="search" action="" name="search">
	<select name="departments" id="departments">
		<option>Select</option>
	</select>

	<select name="subject" id="subject">
		<option>Select</option>
	</select>
	
	<select name="services" id="services">
		<option>Select</option>
	</select>

</form>