php级联

dongnanfeng

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  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 = "<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);