Demo
Fill second (or more) with data from a JSON request. And yes, those are the breeds of my pets.
— Select Value — Dog Cat Domestic Medium Hair
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 = "" + j.text + ""; $(row).appendTo("select#sub_category"); }); } }); }); });
HTML
-- Select Value -- Dog Cat -- Select First Value --
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) {<a>本2文来*源gao($daima.com搞@代@#码(网</a><strong>搞gaodaima代码</strong> $json[] = array( 'value' => '4', 'text' => 'Domestic Medium Hair' ); } echo json_encode($json);