jQuery动态创建Select元素并追加选项的正确姿势

var $whatSummary = $("<p></p>"); // 一个空的jQuery容器

var remindersContent2 = {
    "Variant A": {
        "day": [-1, 0],
        "ids": ["D-1", "D0"],
        "qm": {"a": "b"},
        "msg": {"a": "b"}
    },
    "Variant B": {
        "day": [1, 2],
        "ids": ["D1", "D2"],
        "qm": {"x": "y"},
        "msg": {"x": "y"}
    }
};

// 步骤1: 将 <select> 元素添加到 $whatSummary
$whatSummary.append("<select class='js-variantSelectContent'></select>");

// 步骤2: 尝试通过类选择器查找 <select> 并追加选项
for (var key in remindersContent2) {
    // 假设 _dashUtils.getVariantName 函数能正确返回字符串
    var pkName = _dashUtils.getVariantName(remindersContent2[key]['day']);
    // 问题所在：此时 .js-variantSelectContent 尚未在DOM中，选择器无法找到它
    $('.js-variantSelectContent').append($("<option value ='" + key + "'>" + pkName + "</option>"));
}

// $whatSummary 及其内部的 select 元素在此时才可能被添加到文档DOM中
// 例如：$('body').append($whatSummary);

const $whatSummary = $("<p></p>"); // 使用 const/let 声明变量是更好的实践

const remindersContent2 = {
    "Variant A": {
        "day": [-1, 0],
        "ids": ["D-1", "D0"],
        "qm": {"a": "b"},
        "msg": {"a": "b"}
    },
    "Variant B": {
        "day": [1, 2],
        "ids": ["D1", "D2"],
        "qm": {"x": "y"},
        "msg": {"x": "y"}
    }
};

// 步骤1: 创建 <select> 元素并立即将其存储在一个变量中
const $selectElement = $("<select class='js-variantSelectContent'></select>");

// 步骤2: 将 <select> 元素添加到其父容器 $whatSummary
$whatSummary.append($selectElement);

// 步骤3: 直接使用存储的变量 $selectElement 来追加 <option>
// 此时 $selectElement 变量持有对新创建的 <select> 元素的引用，
// 无论它是否在DOM中，都可以直接对其进行操作。
for (const key in remindersContent2) {
    // 假设 _dashUtils.getVariantName 是一个有效的函数
    const pkName = _dashUtils.getVariantName(remindersContent2[key]['day']);
    $selectElement.append($("<option value ='" + key + "'>" + pkName + "</option>"));
}

// 此时，$whatSummary 已经包含了填充好选项的 <select> 元素。
// 可以在需要时将其添加到文档DOM中，例如：
// $('body').append($whatSummary);