Demo
Fill second (or more)
-- Select Value -- Dog Cat Domestic Medium HairjQuery
$(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);