json + jquery ajax填充选项

时间:2015-10-27 15:01:58

标签: jquery json ajax loops

我必须使用json在html标签内填充选项数据,但我不确定如何准确传递数据。

THE JSON

[{"citta_provincia":"AGRIGENTO - ARAGONA","comune":"ARAGONA"},{"citta_provincia":"ALESSANDRIA - SAN MICHELE","comune":"SAN MICHELE"},{"citta_provincia":"ANCONA","comune":"ANCONA"}]

HTML

<select class="field-s mandatory" id="dedaler_city" name="dealer_city">                                     
<option selected>Scegli...</option>
</select>

THE JAVASCRIPT

    $cittasel = $('#dedaler_city');
    $.ajax({
        url: "http://path-to-json.json",
        dataType: 'HTML',
            success: function(data) {
            var parsa = $.parseJSON(data);
                $.each(parsa, function(key, value) {
                    $cittasel.html("<option value='" + value + "'>" + value + "'</option>'");
                }); 
            },
        error:function(){
        $cittasel.html('<option id="-1">not aviable</option>');
      }     
    }); 

我需要知道如何将值传递给填充选项字段,任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:-1)

中,在下拉列表中添加一个类

    CssClass="widget-dropdown-Ajax-Postback"

在javascript中使用JQuery获取ajax下拉列表

    var ajaxtsddropdown = $("select.widget-dropdown-Ajax-Postback");
    if (ajaxtsddropdown.length > 0) {
    ajaxtsddropdown.removeClass("gvi-widget-dropdown-Ajax-Postback");
    ajaxtsddropdown.ajaxdropdown(
    {
        url: "/AjaxHelp/GetItems"
    });
    ajaxtsddropdown.on("ajaxdropdownselect", function (event, data) {
        if (data.select.val()) {
            $("#ajaxSelected").val(data.select.val());
            data.select.change();
        }
    });
    }

这将选择更改并转到json文件以呈现信息。 在Ajax Controller中,添加

    public JsonResult  GetItems()
    {
    return Json(Controller.GetDropDownItems(),   
    JsonRequestBehavior.AllowGet); 
    }

在后面的代码中,调用类

    if (CustomPostBack)
    {
    DropDown.CssClass = "widget-dropdown-Ajax-Postback";
    }

这将调用json。

然后,json调用将转到您的控制器并检索您的项目,但您要检索它们(服务调用,实体框架等)。这些数据将传回您的下拉列表

如果您有服务设置,请致电该服务。否则,将服务替换为实体框架并循环遍历数据库。

    public static ListItem[] GetDropDownItems()
    {

        var list = new List<ListItem>();

        List<ItemsofInterest> itemsofInterest= new List<ItemsofInterest>();
        ServiceAdapter.InvokeService(ser => { itemsofInterest= ser.GetItemsofInterest(); });

        var items = itemsofInterest.Select(cd => cd.itemNumber).Distinct().ToList();

        foreach (var item in items)
        {
            ListItem currentItem = new ListItem(itemNumber);
            list.Add(currentItem);
        }

        list.Insert(0, new ListItem("Select an item"));
        return list.ToArray();
    }