如何在jQuery多选择器函数中为特定选择器设置差异化参数？

针对你的需求，这里有两种实用的实现方式：

方法1：拆分初始化（推荐） #

先把两个元素的公共配置抽出来单独维护，再分别对每个元素初始化select2，给需要的元素追加专属配置：

// 定义公共配置
const select2CommonConfig = {
    placeholder: "Select Your City",
    ajax: {
        url: "...", // 替换成你的实际接口地址
        // 其他ajax相关配置（比如data、processResults等）
    }
};

// 初始化普通的#zones-list
$("#zones-list").select2(select2CommonConfig);

// 初始化弹窗里的#zones-list-popup，追加dropdownParent配置
$("#zones-list-popup").select2({
    ...select2CommonConfig,
    dropdownParent: $("#modal-content")
});

这种方式逻辑清晰，后续修改公共配置或者差异化配置都很方便，也容易排查问题。

方法2：遍历元素动态生成配置 #

如果想保持一次选择多个元素的写法，可以用each遍历每个匹配元素，根据元素ID动态调整配置：

$("#zones-list, #zones-list-popup").each(function() {
    // 基础配置
    let config = {
        placeholder: "Select Your City",
        ajax: {
            url: "...", // 替换成你的实际接口地址
            // 其他ajax相关配置
        }
    };

    // 判断当前元素是否是弹窗里的那个，是则添加dropdownParent
    if (this.id === "zones-list-popup") {
        config.dropdownParent = $("#modal-content");
    }

    // 初始化当前元素的select2
    $(this).select2(config);
});

这种方式适合元素数量不多的场景，不用拆分初始化代码，在遍历过程中完成配置的差异化处理。

内容的提问来源于stack exchange，提问作者Martin AJ