Question

我需要以下代码的帮助。我有三个SELECT菜单：州，市，医院。我已经用状态列表定义了第一个菜单。当用户选择状态时，将查询一部分JSON数据，并且所选状态内的所有城市都应填充第二个菜单。然后用户从第二菜单中选择一个城市。最后，所选城市内的所有医院都应填写最后一个菜单。

第二个和第三个菜单没有填充

正在运行示例：http://jsfiddle.net/Tku7b/12/

<div>
<select name="state"> 
<option value="" selected="selected">Select a State</option> 
<option value="LA">Louisiana</option> 
<option value="TX">Texas</option> 
<option value="WI">Wisconsin</option> 

</select>

</div>
<select name="city"></select><br>
<select name="hospital"></select>

var json = {
    "hospitals": {
        "facility": [

        {
            "HosName": "UNIVERSITY OF WISCONSIN HOSPITALS A",
                "City": "MADISON",
                "State": "WI",
                "SPval": 104938,
                "Hospitalval": 501,
                "ICUval": 55,
                "SMval": 6132,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "UNIVERSITY OF IOWA HOSPITALS & CLIN",
                "City": "IOWA CITY",
                "State": "WI",
                "SPval": 101188,
                "Hospitalval": 744,
                "ICUval": 20,
                "SMval": 8307,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "CLEVELAND CLINIC FOUNDATION",
                "City": "CLEVELAND",
                "State": "WI",
                "SPval": 81954,
                "Hospitalval": 1257,
                "ICUval": 205,
                "SMval": 19758,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "METHODIST HOSPITAL",
                "City": "SAN ANTONIO",
                "State": "WI",
                "SPval": 71477,
                "Hospitalval": 1419,
                "ICUval": 104,
                "SMval": 5607,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "AURORA ST LUKES MEDICAL CENTER",
                "City": "MILWAUKEE",
                "State": "WI",
                "SPval": 68638,
                "Hospitalval": 710,
                "ICUval": 68,
                "SMval": 3653,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "NEW YORK PRESBYTERIAN HOSPITAL 0 CO",
                "City": "NEW YORK",
                "State": "WI",
                "SPval": 66846,
                "Hospitalval": 959,
                "ICUval": 99,
                "SMval": 15472,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "DOCTORS HOSPITAL AT RENAISSANCE",
                "City": "EDINBURG",
                "State": "TX",
                "SPval": 60026,
                "Hospitalval": 521,
                "ICUval": 35,
                "SMval": 2845,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "VA MEDICAL CENTER ATLANTA",
                "City": "DECATUR",
                "State": "TX",
                "SPval": 59781,
                "Hospitalval": 191,
                "ICUval": 45,
                "SMval": 1864,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "THE JOHNS HOPKINS HOSPITAL",
                "City": "BALTIMORE",
                "State": "TX",
                "SPval": 58423,
                "Hospitalval": 981,
                "ICUval": 104,
                "SMval": 9036,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "VIRTUA WEST JERSEY HOSPITAL 0 VOORH",
                "City": "VOORHEES",
                "State": "TX",
                "SPval": 57953,
                "Hospitalval": 352,
                "ICUval": 20,
                "SMval": 3073,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "PINNACLEHEALTH AT HARRISBURG HOSPIT",
                "City": "HARRISBURG",
                "State": "LA",
                "SPval": 55529,
                "Hospitalval": 643,
                "ICUval": 28,
                "SMval": 3887,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "FLORIDA HOSPITAL 0 ORLANDO",
                "City": "ORLANDO",
                "State": "LA",
                "SPval": 53620,
                "Hospitalval": 1538,
                "ICUval": 272,
                "SMval": 13716,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "ORLANDO REGIONAL MEDICAL CENTER",
                "City": "ORLANDO",
                "State": "LA",
                "SPval": 53490,
                "Hospitalval": 1305,
                "ICUval": 64,
                "SMval": 10422,
                "OPval": 0,
                "AVLOSval": 0
        }, {
            "HosName": "YORK HOSPITAL",
                "City": "SOUTH BERWICK",
                "State": "LA",
                "SPval": 0,
                "Hospitalval": 0,
                "ICUval": 0,
                "SMval": 0,
                "OPval": 0,
                "AVLOSval": 0
        }

        ]
    }
};

var SPval = 0;
var ICUval = 0;
var result = SPval + ICUval;


$(function () {
    $("select[name='state']").change(function () {
        var searchName = $("select[name='state']").val();
        var matches = $.grep(json.hospitals.facility, function (v) {
            return v.State == searchName;
        })

        var city = $.map(matches, function (v) {
            return v.City + "<option>"
        }).join("")
        $("select[name='city']").html(city);

        var Hname = $.map(matches, function (v) {
            return v.HosName + "<option>"
        }).join("")
        $("select[name='hospital']").html(Hname);
    });

});

Answer 1

试试这个，应该有效

$(function () {
    $("select[name='state']").change(function () {
        var searchName = $(this).val();
        var matches = [];        
        for(var i in json.hospitals.facility) {
            var dt = json.hospitals.facility[i];
            if(dt.State == searchName)              
                matches.push('<option value=' + dt.City + '>' + dt.City + '</option>');
        }  
        $("select[name='city']").html(matches.join("")).change(function() {
            var city = $(this).val();
            var matches = [];
            for(var k in json.hospitals.facility) {
                var dt = json.hospitals.facility[k];
                if(dt.City == city) matches.push('<option>' + dt.HosName + '</option>');                
            }
            $("select[name='hospital']").html(matches.join(''));     
        });      

    });

});

使用JSON填充SELECT

1 个答案: