JSON結果到下拉列表

Question

嗨，我正在使用Web表單。我有一個組合框，用於存放所有單位。 我已經使用JSON從數據庫中獲取了所有單位，現在我需要將所有這些單位綁定到下拉列表中。我該怎么做...？

    function getUnitFamily(pack_detl_ID,select) {
        //***********************************//
        PageMethods.getUnitFamily(pack_detl_ID,
                                function(result) {
                                    if (result != null) {
                                        custinfo = eval(result);
                                        if (custinfo != null) {


                                            $('#<%=drpUnit.ClientID%> option').remove();
                                            var objSub = document.getElementById('<%=drpUnit.ClientID%>');
                                            $.each(custinfo, function(i, item) {

                             listOpt = document.createElement("option");
                                                listOpt.value = item[0];
                                                listOpt.text = item[1];
                                                objSub.add(listOpt);
                                            });

                                            alert(select);
                    document.getElementById('<%= drpUnit.ClientID %>').value = select;


                                        }
                                    }
                                }, pageMethodError);

有一個例子可以解釋嗎

Answer 1

組合框聽起來像您正在使用ASP.NET控件。 當然，您可以在后面的代碼中將項目綁定到該控件。 如果您正在做一些AJAX的工作，並在頁面中有一個下拉菜單（element>）要在客戶端填充，則可能需要看一下jQuery提供的功能。 例如，使用AJAX api檢索您的數據並將該數據推入您的下拉列表中，如下所示：

var options = $("#options"); 
$.each(result, function() { 
    options.append($("<option />").val("sometext").text("sometext")); 
}); 

Answer 2

過去，我在處理下拉菜單時使用過插件。

http://www.texotela.co.uk/code/jquery/select

請求JSON數據：

//Get the JSON Data
$.getJSON(url, function(json) {
   PopulateDropDownFromJson(json, "#element");
});

然后只需將JSON傳遞到使用上述插件的函數中

function PopulateDropDownFromJson(json, element){
   $.each(json, function() {
   $(element).addOption(this[valueText], this[displayText], false);
});

}