下拉列表未在 Ajax 内填写

Question

我有两个下拉菜单。第一个是 RouteTypeSelect，第二个是 RouteNameSelect。

我想使用 Ajax 从数据库动态获取数据来填充第一个更改后的第二个。我尝试了几种方法来填充下拉列表，所有方法都在 Ajax post 之外工作，但是当在 Ajax 的响应中设置时它不起作用：

var $select1 = $('#RouteTypeSelect'), $select2 = $('#RouteNameSelect'), $options = $select2.find('option');

$select1.on('change', function () {
    $.ajax({
        type: "POST",
        url: "page1.aspx/GetRouteName",
        data: '{IdRouteType: "3" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data2) {
            options = [];
            $.each($.parseJSON(data2.d), function () {
                var id= this.IdRoute;
                var name= this.Name;
                $("<option></option>", {
                    value: this.IdRoute,
                    text: this.Name
                }).appendTo($('#RouteNameSelect'));
            });
        },
        failure: function () {
            alert("Failed!");
        }
    });
}).trigger('change');

后面的代码：

[WebMethod]
public static string GetRouteName(string IdRouteType)
{
    List<Route> RouteNameList2 = new List<Route>();
    RouteLogic RouteBLL = new RouteLogic();
    DataTable RouteTypeDT = RouteBLL.SelectRouteByIdRouteType(Convert.ToInt16(IdRouteType));
    for (int i = 0; i < RouteTypeDT.Rows.Count; i++)
    {
        Route g = new Route();
        g.IdRoute = Convert.ToInt32(RouteTypeDT.Rows[i]["IdRoute"]);
        g.Name = RouteTypeDT.Rows[i]["Name"].ToString();
        RouteNameList2.Add(g);
    }
    return JsonConvert.SerializeObject(RouteNameList2);
}

我试过了@

$('#RouteNameSelect3232').append($("<option     />").val(this.IdRoute).text(this.Name));

还有这个：

options = [];
options.push('<option value="' + this.IdRoute + '">' + this.Name + '</option>');

还有这个：

$select2.html('<option value="' + this.IdRoute + '">' + this.Name + '</option>');

注意this.Name和this.IdRoute正常填写

我该如何解决这个问题？

更新：下面仅附加最后一个值...我想附加一个选项列表。

$('#RouteNameSelect3232').val(null).trigger('change');
var studentSelect = $('#RouteNameSelect3232');
$.ajax({
    type: 'POST',
    url: 'AddBus.aspx/GetRouteName',
    contentType: "application/json; charset=utf-8",
    data: '{IdRouteType: "3" }'
}).then(function (data2) {

    // Create the option and append to Select2
    $.each($.parseJSON(data2.d), function () {
        var option = new Option(this.Name, this.IdRoute, true, true);
        studentSelect.append(option).trigger('change');
    }),

    // Manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data2
        }
    });
});

Answer 1

试一试...

$.each([{id:1,value:'hello'},{id:2,value:'hey'}], function () {
    $("<option></option>", {
        value: this.id,
        text: this.value
    }).appendTo($('#myselect'));
});

Answer 2

在 select 添加新的 <option> 后，您需要运行 select2()

检查这个Fiddle http://jsfiddle.net/4ad7A/963/

更新您的成功函数

     success: function (data2) {
                        options = [];
                        $.each($.parseJSON(data2.d), function () {
                            var id= this.IdRoute;
                            var name= this.Name;
$('#RouteNameSelect').append( $("<option>", {
                                value: id,
                                text: name
                            }));
                        });   
        $('#RouteNameSelect').select2()


                    },

下拉列表未在 Ajax 内填写

Dropdown not being filled inside Ajax

ajax

jquery

html-select