使用AjaxControlToolKit创建自动完成ComboBox时选项显示异常求助

AjaxControlToolkit的ComboBox并非原生HTML的<select>元素，它渲染后会生成一个包含文本输入框、隐藏原生<select>和下拉面板的复合DOM结构。你直接通过jQuery选择#<%= ComboBox1.ClientID %>对应的元素并append<option>，实际上是把选项添加到了控件的外层容器中，而非内部的下拉列表，所以选项会直接显示在页面上。

方法1：使用ComboBox的客户端API添加选项 #

AjaxControlToolkit的ComboBox提供了官方客户端API来操作选项，直接调用add_item()方法即可正确添加：

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "ControlKit.aspx/GetComboBoxData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            // 获取ComboBox的客户端实例
            var comboBox = $find("<%= ComboBox1.ClientID %>");
            $.each(response.d, function () {
                // 创建ComboBox选项对象并添加
                var item = new AjaxControlToolkit.ComboBoxItem();
                item.set_text(this.Text);
                item.set_value(this.Value);
                comboBox.get_items().add(item);
            });
        },
        failure: function (response) {
            alert(response.d || "加载选项失败");
        }
    });
});

方法2：操作内部原生select元素（不推荐，仅临时场景使用） #

如果一定要用jQuery操作DOM，需要定位到控件内部的原生<select>（ID规则为原ClientID拼接_Select），添加选项后强制刷新控件：

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "ControlKit.aspx/GetComboBoxData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            // 找到控件内部的原生select
            var innerSelect = $("#<%= ComboBox1.ClientID %>_Select");
            $.each(response.d, function () {
                innerSelect.append($("<option></option>").val(this.Value).html(this.Text));
            });
            // 刷新ComboBox控件同步状态
            $find("<%= ComboBox1.ClientID %>").refresh();
        },
        failure: function (response) {
            alert(response.d || "加载选项失败");
        }
    });
});

确保你的GetComboBoxData方法符合AJAX调用要求：

using System.Web.Services;
using System.Collections.Generic;

public partial class ControlKit : System.Web.UI.Page
{
    [WebMethod]
    public static List<KeyValuePair<string, string>> GetComboBoxData()
    {
        // 模拟动态获取的选项列表
        var data = new List<KeyValuePair<string, string>>
        {
            new KeyValuePair<string, string>("1", "C#"),
            new KeyValuePair<string, string>("2", "COBOL"),
            new KeyValuePair<string, string>("3", "ADA")
        };
        return data;
    }
}

内容的提问来源于stack exchange，提问作者Nigel Tunnicliffe