JSON结果到下拉列表

时间:2011-10-24 08:44:55

标签: javascript json drop-down-menu

您好我正在网络表单上工作.. 我有一个组合框用于持有所有单位。 我已经从数据库中使用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);

用一个例子可以解释任何一个

2 个答案:

答案 0 :(得分:0)

组合框听起来像是在使用ASP.NET控件。当然,您可以在后面的代码中将项目绑定到该控件。如果你正在做一些AJAX的东西,并且你想要在客户端填充你的页面中的下拉列表(元素&gt;),你可能想看看jQuery提供的内容。例如,使用AJAX api检索您的数据并将数据推送到您的下拉列表中,如下所示:

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

答案 1 :(得分:0)

过去我在使用下拉菜单时使用过插件。

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);
});

}