使用JSON填充选择

我需要一些帮助以下代码。我有三个SELECT菜单：州，市，医院。我已经用状态列表定义了第一个菜单。当用户选择状态时，会查询一部分JSON数据，并且所选状态下的所有城市都应填充第二个菜单。然后用户从第二个菜单中选择一个城市。最后，所选城市内的所有医院都应填充最后一个菜单。使用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); 
    }); 

});

来源

2014-02-09 DataGuy

...和你的问题是.. 。？ –

第二个和第三个菜单没有填充......在我发布的示例中。 – DataGuy

你没有在jsFiddle中包含jQuery资源。此外，并非所有州都有数据集中的医院。尝试'德克萨斯'。（http://jsfiddle.net/Tku7b/1/） – Moob

试试这个，应该工作

$(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(''));  
     });  

    }); 

});

来源

2014-02-09 01:44:52 cardeol

这样做。非常感谢你的帮助！ – DataGuy

使用JSON填充选择

回答

相关问题