Мне нужна помощь по следующему коду. У меня есть три меню SELECT: состояние, город, больница. Я определил первое меню со списком состояний. Когда пользователи выбирают состояние, запрашивается раздел данных JSON, и все города в выбранном состоянии должны заполнять второе меню. Затем пользователь выбирает город из второго меню. Наконец, все больницы в выбранном городе должны заполнить последнее меню.Заполнение 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);
});
});
... и ваша проблема .. .? –
Второе и третье меню не заполняются ... его в примере, который я опубликовал. – DataGuy
Вы не включили ресурс jQuery в свой jsFiddle. Кроме того, не все штаты имеют больницы в вашем наборе данных. Попробуйте тексас. (http://jsfiddle.net/Tku7b/1/) – Moob