php级联

php级联

Demo

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

-- Select Value --DogCatDomestic 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);

posted on 2010-06-17 23:22 浙林龙哥 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/huqingyu/archive/2010/06/17/1759829.html