在 jquery ajax 调用中向下拉列表添加默认值答案

【问题标题】：Adding default value to dropdown in jquery ajax call在 jquery ajax 调用中向下拉列表添加默认值
【发布时间】：2014-03-24 10:18:33
【问题描述】：

我有级联下拉菜单。在选择一个下拉列表时，另一个下拉列表使用 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;
    }

【问题讨论】：

标签： c# jquery asp.net ajax

【解决方案1】：

在成功函数中这样做：

    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 来绑定下拉列表。每当我选择一个特定的值时，我总是在服务器端将选定的值设为 0？如何访问 ajax 绑定下拉服务器端的选定值？
我需要使用隐藏字段吗？
因为它在客户端通过 ajax 填充，所以您可能无法从服务器端访问选定的值，是的，您可以使用隐藏字段来跟踪选定的值，顺便说一句，为什么不使用 ajax 控件工具包的级联下拉菜单？

【解决方案2】：

$.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!");
            }
        });

【讨论】：