在新窗口打开表单时无法动态更新Chosen下拉框选中值

我通过以下代码打开包含表单的新窗口：

OpenedFormWindow = window.open(url, "popup_window", params);

var form_data = selected_option.data();
console.log(form_data);

OpenedFormWindow.onload = function() {
    setTimeout(function() {
        $.each(form_data, function (e, v) {
            if (e.startsWith('field_')) {
                e = e.slice(6);

                var inputElement = $(OpenedFormWindow.document).find(':input[name="' + e + '"]');
                console.log(inputElement);

                inputElement.val(v);

                inputElement.trigger('chosen:updated');
                //console.log('test', inputElement.data('chosen'));
            }
        });
    }, 500);
}

该表单包含一个Chosen下拉框，我尝试通过form_data（键为元素name，值为要设置的选中值）更新它。目标下拉框的定义如下：

<div class="mb-3">
    <label class="form-label">Customer</label>

    <?php
        $customers = $pdo->all('SELECT id, name FROM customers');
    ?>
    <select class="form-select" id="customer_dropdown" required name="customer_id">
        <option></option>
        <? foreach($customers as $customer): ?>
            <option <?= $item_data['customer_id'] == $customer['id'] ? 'selected' : '' ?> value="<?= $customer['id'] ?>"><?= $customer['name'] ?></option>
        <? endforeach; ?>
    </select>
</div>

Chosen在单独的JS文件中初始化：

$('select').not('.no_chosen,.ship_to_selector').chosen({ inherit_select_classes: true });

类似代码在系统其他位置可正常工作，但此处下拉框值未更新。同时传递键值对更新Product Family输入框可正常生效，因此确定问题与Chosen插件相关。

从控制台日志可知，select元素已被正确选中，且Chosen已完全初始化（已添加chosen-master类，chosen-container div已存在）。我已为$.each添加setTimeout，但无效果，也确认了传递的值存在于下拉框选项中。

请问如何更新新窗口中的Chosen下拉框选中值？

解决方案 #

问题核心是跨窗口操作时，Chosen实例的上下文不匹配——你用父窗口的jQuery操作新窗口的元素，触发事件时无法正确关联新窗口里的Chosen实例。可以按以下方式修改：

方案1：使用新窗口的jQuery上下文

OpenedFormWindow.onload = function() {
    setTimeout(function() {
        // 获取新窗口的jQuery对象
        const popupJq = OpenedFormWindow.$;
        $.each(form_data, function (e, v) {
            if (e.startsWith('field_')) {
                e = e.slice(6);

                // 用新窗口的jQuery查找元素
                const inputElement = popupJq(OpenedFormWindow.document).find(`:input[name="${e}"]`);
                
                inputElement.val(v);
                // 在新窗口上下文触发Chosen更新事件
                inputElement.trigger('chosen:updated');
            }
        });
    }, 500);
}

方案2：直接操作Chosen实例（兜底方案）

如果方案1无效，可以直接修改Chosen的DOM和实例状态：

// 替换trigger那一行代码
inputElement.val(v);
const chosenInstance = inputElement.data('chosen');
// 标记原生选项为选中
chosenInstance.selected_item.attr('selected', true);
// 标记Chosen下拉列表中的对应选项为选中状态
chosenInstance.chosen_results.find('.active-result').filter(function() {
    return popupJq(this).text() === inputElement.find('option:selected').text();
}).addClass('result-selected');
// 强制更新Chosen显示
chosenInstance.update_field();

额外检查点

• 确认form_data中的值类型和下拉框value完全匹配（比如数字和字符串的差异，比如123和"123"）
• 可以延长setTimeout的时间（比如1000ms），确保新窗口的Chosen完全初始化完成

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