如何在jQuery中使用json數據填充下拉列表？

我正在開發的國家狀態級聯下拉列表...我回到JSON結果基於countryId，但我不知道如何填充/在一個新的下拉列表框填滿它......如何在jQuery中使用json數據填充下拉列表？

這裏就是我使用，

function getstate(countryId) { 
    $.ajax({ 
     type: "POST", 
     url: "Reg_Form.aspx/Getstates", 
     data: "{'countryId':" + (countryId) + "}", 
     contentType: "application/json; charset=utf-8", 
     global: false, 
     async: false, 
     dataType: "json", 
     success: function(jsonObj) { 
      alert(jsonObj.d); 
     } 
    }); 
    return false; 
}

和警覺給這個，

{"Table" : [{"stateid" : "2","statename" : "Tamilnadu"}, 
      {"stateid" : "3","statename" : "Karnataka"}, 
      {"stateid" : "4","statename" : "Andaman and Nicobar"}, 
      {"stateid" : "5","statename" : "Andhra Pradesh"}, 
      {"stateid" : "6","statename" : "Arunachal Pradesh"}]}

我的aspx頁面有這個，

<td> 
<asp:DropDownList ID="DLCountry" runat="server" CssClass="dropDownListSkin" 
onchange="return getstate(this.value);"> 
</asp:DropDownList> 
    </td> 
<td> 
<asp:DropDownList ID="DLState" runat="server" CssClass="dropDownListSkin"> 
    </asp:DropDownList> 
</td>

如何填寫DLState下拉任何建議...

編輯：

當我通過螢火檢查我得到了我的AJAX後的反應，

{"d":"{\"Table\" : [{\"stateid\" : \"2\",\"statename\" : \"Tamilnadu\"},{\"stateid\" : \"3\",\"statename\" : \"Karnataka\"},{\"stateid\" : \"4\",\"statename\" : \"Andaman and Nicobar\"},{\"stateid\" : \"5\",\"statename\" : \"Andhra Pradesh\"},{\"stateid\" : \"6\",\"statename\" : \"Arunachal Pradesh\"},{\"stateid\" : \"7\",\"statename\" : \"Assam\"},{\"stateid\" : \"8\",\"statename\" : \"Bihar\"},{\"stateid\" : \"9\",\"statename\" : \"Dadra and N. Haveli\"},{\"stateid\" : \"10\",\"statename\" : \"Daman and Diu\"},{\"stateid\" : \"11\",\"statename\" : \"Delhi\"},{\"stateid\" : \"12\",\"statename\" : \"Goa\"},{\"stateid\" : \"13\",\"statename\" : \"Gujarat\"},{\"stateid\" : \"14\",\"statename\" : \"Haryana\"},{\"stateid\" : \"15\",\"statename\" : \"Himachal Pradesh\"},{\"stateid\" : \"16\",\"statename\" : \"Jammu and Kashmir\"},{\"stateid\" : \"17\",\"statename\" : \"Kerala\"},{\"stateid\" : \"18\",\"statename\" : \"Laccadive Islands\"},{\"stateid\" : \"19\",\"statename\" : \"Madhya Pradesh\"},{\"stateid\" : \"20\",\"statename\" : \"Maharashtra\"},{\"stateid\" : \"21\",\"statename\" : \"Manipur\"},{\"stateid\" : \"22\",\"statename\" : \"Meghalaya\"},{\"stateid\" : \"23\",\"statename\" : \"Mizoram\"},{\"stateid\" : \"24\",\"statename\" : \"Nagaland\"},{\"stateid\" : \"25\",\"statename\" : \"Orissa\"},{\"stateid\" : \"26\",\"statename\" : \"Pondicherry\"},{\"stateid\" : \"27\",\"statename\" : \"Punjab\"},{\"stateid\" : \"28\",\"statename\" : \"Rajasthan\"},{\"stateid\" : \"29\",\"statename\" : \"Sikkim\"},{\"stateid\" : \"30\",\"statename\" : \"Tripura\"},{\"stateid\" : \"31\",\"statename\" : \"Uttar Pradesh\"},{\"stateid\" : \"32\",\"statename\" : \"West Bengal\"}]}"}

來源

2010-04-14 Chendur Pandian

看到這一個例子我的回答： http://stackoverflow.com/questions/2403441/jquery-ajax- pass-success-data-into-separate-function/2403573＃2403573 – 2010-04-14 13:58:32

在Firefox和Chrome瀏覽器中使用onchange事件作爲下拉列表（或html選擇）對我來說並不適用。我使用jQuerys change（）代替（http://api.jquery.com/change/）。 – 2010-04-14 14:20:24

@Daniel'$（「＃<％= DLState.ClientID％>」）。html（listItems）;'這一行似乎有錯誤...任何suiggestion .. – 2010-04-14 14:26:30

var listItems= ""; 
var jsonData = jsonObj.d; 
    for (var i = 0; i < jsonData.Table.length; i++){ 
     listItems+= "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>"; 
    } 
    $("#<%=DLState.ClientID%>").html(listItems);

示例

<html> 
    <head></head> 
    <body> 
     <select id="DLState"> 
     </select> 
    </body> 
    </html> 

    /*javascript*/ 
    var jsonList = {"Table" : [{"stateid" : "2","statename" : "Tamilnadu"}, 
       {"stateid" : "3","statename" : "Karnataka"}, 
       {"stateid" : "4","statename" : "Andaman and Nicobar"}, 
       {"stateid" : "5","statename" : "Andhra Pradesh"}, 
       {"stateid" : "6","statename" : "Arunachal Pradesh"}]} 

    $(document).ready(function(){ 
     var listItems= ""; 
     for (var i = 0; i < jsonList.Table.length; i++){ 
     listItems+= "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>"; 
     } 
     $("#DLState").html(listItems); 
    });

來源

2010-04-14 13:35:59 Jon

@jon jsonObj.Table is undefined？爲什麼我得到這個？ – 2010-04-14 13:47:16

@Pandiya Chendur，我不確定，讓我發佈一個工作示例，也許這會有所幫助。試試jsonObj.d.Table – Jon 2010-04-14 13:48:59

@jon ok謝謝你的回答... – 2010-04-14 13:50:20

要使用JSON填充ComboBox，您也可以考慮使用：jqwidgets combobox。

來源

2012-07-24 07:42:57 turbob1234

//javascript 
//teams.Table does not exist 

function OnSuccessJSON(data, status) { 
    var teams = eval('(' + data.d + ')'); 
    var listItems = ""; 
    for (var i = 0; i < teams.length; i++) { 
     listItems += "<option value='" + teams[i][0]+ "'>" + teams[i][1] + "</option>"; 
    } 
    $("#<%=ddlTeams.ClientID%>").html(listItems); 
}

來源

2012-09-15 11:54:27

試試這個它的工作對我來說

$(document).ready(function(e){ 
 
     $.ajax({ 
 
      url:"fetch", 
 
      processData: false, 
 
      dataType:"json", 
 
      type: 'POST', 
 
      cache: false, 
 
      success: function (data, textStatus, jqXHR) { 
 
         
 
         $.each(data.Table,function(i,tweet){ 
 
\t \t \t $("#list").append('<option value="'+tweet.actor_id+'">'+tweet.first_name+'</option>'); 
 
\t \t \t });} 
 
     }); 
 
    });

來源

2015-08-06 15:55:07

嘗試這一個它將工作 – 2015-08-06 15:55:27

它只是一個示例如何閱讀json並實現它 – 2015-08-06 16:03:39

如何在jQuery中使用json數據填充下拉列表？

回答

相關問題