如何基于URL参数默认选中Select2下拉框选项？

先提个小细节：你的JS代码里用了$("#Address1")，但HTML里的select id是Address，选择器要对应上，不然代码不会生效哦！

针对AJAX加载数据的Select2，直接设置value没法实现默认选中——因为Select2的选项是动态加载的，得确保目标选项被Select2识别才行，具体可以按下面的步骤来：

方法1：已知选项ID和文本（或可快速获取） #

如果你已经知道参数e对应的选项文本，或者能通过简单逻辑拿到文本，可以直接用Select2的API设置选中项：

$(document).ready(function() { 
    // 保留你提取URL参数的代码
    var url = window.location.href; 
    var a = url.split('='); 
    var b = a[2]; 
    var d = b.split('_'); 
    var e = d[1]; 

    // 初始化Select2
    $("#Address").select2({ 
        ajax: { 
            url: "你的API地址", 
            dataType: 'json', 
            delay: 250, 
            data: function (params) { 
                return { q: params.term, page: params.page }; 
            }, 
            processResults: function (data, params) { 
                return { results: data.items }; 
            }, 
            cache: true 
        }, 
        placeholder: 'Search for a repository', 
        escapeMarkup: function (markup) { return markup; }, 
        minimumInputLength: 1, 
    });

    // 设置默认选中项
    // 这里替换成你实际获取到的选项文本
    $("#Address").select2('data', [{
        id: e,
        text: '对应选项的文本内容'
    }]).trigger('change');
});

方法2：动态通过AJAX获取目标选项数据 #

如果不知道选项文本，需要根据IDe从API拉取对应信息，可以在Select2初始化后，发起单独请求获取数据再设置：

$(document).ready(function() { 
    var url = window.location.href; 
    var a = url.split('='); 
    var b = a[2]; 
    var d = b.split('_'); 
    var e = d[1]; 

    var $select = $("#Address").select2({ 
        ajax: { 
            url: "你的API地址", 
            dataType: 'json', 
            delay: 250, 
            data: function (params) { 
                return { q: params.term, page: params.page }; 
            }, 
            processResults: function (data, params) { 
                return { results: data.items }; 
            }, 
            cache: true 
        }, 
        placeholder: 'Search for a repository', 
        escapeMarkup: function (markup) { return markup; }, 
        minimumInputLength: 1, 
    });

    // 根据ID请求单个选项数据
    $.ajax({
        url: "你的单选项查询API", // 比如支持?id=e的参数格式
        data: { id: e },
        dataType: 'json',
        success: function(data) {
            // 假设返回的data是包含id和text的选项对象
            $select.select2('data', [data]).trigger('change');
        }
    });
});

关键注意点 #

• 确保参数e是Select2选项对应的id值，Select2是通过id匹配选项的
• 必须调用.trigger('change')，否则Select2不会更新UI、也不会触发相关事件
• 如果你的API支持通过ID直接搜索，也可以试试$("#Address").val(e).trigger('change')，但这种方式仅当选项已经被加载到Select2列表中才生效，首次加载页面时大概率不适用，所以更推荐上面两种方法

内容的提问来源于stack exchange，提问作者Code ninja