Razor页面切换下拉选项时如何将变更ID传递至Modal？

完全可行，核心是监听下拉菜单的变化事件，实时更新打开Modal按钮的data-id属性，确保Modal加载时使用最新选中项的ID。

具体实现步骤： #

1. 监听下拉菜单的变更事件
   针对你使用的Select2下拉组件，可以绑定普通change事件或Select2专属的select2:select事件，获取选中项的ID。
2. 同步更新按钮的关联ID
   将选中项的ID同步到打开Modal的按钮的data-id属性中，同时更新DOM属性和jQuery缓存值，避免数据不一致。

代码示例： #

方案1：使用普通change事件

// 监听下拉菜单的change事件
$('#InteractingDrugId').on('change', function() {
    // 获取选中的药物ID
    const selectedDrugId = $(this).val();
    // 更新按钮的data-id属性
    $('.edit-interaction-ref').attr('data-id', selectedDrugId);
    $('.edit-interaction-ref').data('id', selectedDrugId);
});

方案2：使用Select2专属的select事件（更贴合组件特性）

// 监听Select2的选中事件
$('#InteractingDrugId').on('select2:select', function(e) {
    // 从Select2返回数据中获取ID
    const selectedDrugId = e.params.data.id;
    // 更新按钮的关联ID
    $('.edit-interaction-ref').attr('data-id', selectedDrugId);
    $('.edit-interaction-ref').data('id', selectedDrugId);
});

关键注意点： #

• 确保下拉菜单生成的<option>标签value属性对应药物ID（你的Model.AllSubstances需为SelectList类型，且Value字段设为药物ID）。
• 加载Modal内容的逻辑必须在点击按钮时实时读取当前按钮的data-id，而非页面初始化的固定值，示例逻辑如下：

// 打开Modal的点击事件
$('.edit-interaction-ref').on('click', function() {
    // 获取最新ID
    const currentDrugId = $(this).data('id');
    // 用currentDrugId请求数据并渲染Modal内容
    // 示例：$.get(`/api/interactions/${currentDrugId}`, function(data) {
    //   $('#modal-container').html(data);
    //   $('#your-modal').modal('show');
    // });
});

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