在jquery ajax调用中为下拉菜单添加默认值

本文关键字：下拉菜单 添加 默认值 jquery ajax 调用 | 更新日期: 2023-09-27 17:53:01

我有级联下拉列表。选择一个下拉菜单后，另一个下拉菜单使用ajax绑定。这完全工作，但我希望第二个下拉框也应该包含默认文本和值('选择我')。我如何添加这个默认值。这是我的代码。

   function BindCities(drpstate) {
        var stateid = $(drpstate).val();
        $.ajax({
            url: '/Register.aspx/BindCities',
            type: "POST",
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: '{"id":"' + stateid + '"}',
            success: function (result) {
                var drpcity = $('.drpcity');
                drpcity.empty();
                $.each(result.d, function () {
                    drpcity.append(
                        $('<option/>', {
                            value: this.id,
                            text: this.name
                        })
                    );
                });
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    }
HTML: 

  <asp:DropDownList runat="server" CssClass="drpstate" onchange="BindCities(this)" ID="drpdwnState">
                            <asp:ListItem Text="Select State" Value="0"></asp:ListItem>
                        </asp:DropDownList>
 <asp:DropDownList runat="server" CssClass="drpcity" ID="drpdwnCity">
                            <asp:ListItem Text="Select City" Value="0"></asp:ListItem>
                        </asp:DropDownList>
服务器端代码: 
 [WebMethod]
    public static List<CountryState> BindCities(int id)
    {
        EkbnManager em = new EkbnManager();
        List<City> cities = em.GetCityByStateId(id);
        List<CountryState> countrystate = new List<CountryState>();
        foreach (var item in cities)
        {
            CountryState cnt = new CountryState();
            cnt.name = item.Name;
            cnt.id = item.Id;
            countrystate.Add(cnt);
        }
        return countrystate;
    }

在jquery ajax调用中为下拉菜单添加默认值

在成功函数中这样做:

    success: function (result) {
                    var drpcity = $('.drpcity');
                    drpcity.empty();
                     drpcity.append(
                            $('<option/>', {
                                value: -1,
                                text: please select one
                            })
                    $.each(result.d, function () {
                        drpcity.append(
                            $('<option/>', {
                                value: this.id,
                                text: this.name
                            })
                        );
                    });

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/GetMethod",
            data: "",
            dataType: "json",
            success: function (data) {
                $("#drpName").empty();
                $("<option value='-1'>(Select item)</option>").appendTo("#drpName");
                $.each(data.d, function (key, value) {
                    $("#drpName").append($("<option></option>").val(value.ID).html(value.Title));
                });
            },
            error: function (result) {
                alert("Could not get!");
            }
        });
相关文章：