Fill second (or more) <select> with data from a JSON request. And yes, those are the breeds of my pets.
$(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");
});
}
});
});
});
<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 = 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);