jQuery <select> Manipulation: Fill multiple <select> with JSON data

Demo

Fill second (or more) <select> with data from a JSON request. And yes, those are the breeds of my pets.

-- Select Value -- Dog Cat -- Select First Value --

jQuery

$(document).ready(function(){
	$("select#category").change(function(){
		// Post string
		var post_string = "type=" + $(this).val();

		// Send the request and update sub category dropdown
		$.ajax({
			type: "POST",
	        data: post_string,
	        dataType: "json",
	        cache: false,
	        url: 'json.php',
	        timeout: 2000,
	        error: function() {
	        	alert("Failed to submit");
	        },
	        success: function(data) { 
				// Clear all options from sub category select
				$("select#sub_category option").remove();

				// Fill sub category select
	        	$.each(data, function(i, j){
					var row = "<option value=\"" + j.value + "\">" + j.text + "</option>";
					$(row).appendTo("select#sub_category");
				});
	        }
		});
	});	
});

HTML

<select name="category" id="category">
	<option value="">-- Select Value --</option>
	<option value="1">Dog</option>
	<option value="2">Cat</option>
</select>

<select name="sub_category" id="sub_category">
	<option value="">-- Select First Value --</option>
</select>

JSON AJAX Script, json.php

$json = array();

if ($_POST['type'] == 1)
{
	$json[] = array(
		'value' => '1',
		'text' => 'Staffordshire Bull Terrier'
	);
	$json[] = array(
		'value' => '2',
		'text' => 'Labrador Retriever/American Pit Bull Mix'
	);
	$json[] = array(
		'value' => '3',
		'text' => 'German Short Hair Pointer'
	);
}
elseif ($_POST['type'] == 2)
{
	$json[] = array(
		'value' => '4',
		'text' => 'Domestic Medium Hair'
	);
}

echo json_encode($json);

Donate

If you found this article useful and would like to see more like it this please consider making a donation.