如何在Select2下拉框选中Apple时动态设置选项值？

核心需求明确 #

你的Select2下拉框中「Apple」选项初始值为空，需要在选中它时，通过AJAX请求获取动态值THISVARIABLE，并将该值设置为「Apple」选项的value属性，同时保证Select2的状态同步。

实现方案 #

1. 优化初始HTML（可选但推荐） #

为了更稳定地识别「Apple」选项，建议给它添加自定义标识（避免依赖文本判断，防止文本修改后逻辑失效）：

<select id="fruit" title="fruit" name="fruit" class="form-control select2-single">
  <option value="">&nbsp;</option>
  <option value="" data-fruit-type="apple">Apple</option>
  <option value="" data-fruit-type="lemon">Lemon</option>
</select>

2. 编写JavaScript逻辑 #

利用Select2专属事件监听选中动作，结合AJAX请求完成动态赋值：

// 初始化Select2组件
$('#fruit').select2();

// 监听Select2的选中事件
$('#fruit').on('select:select', function(e) {
  const selectedEl = e.params.data.element;
  const $selectedOption = $(selectedEl);

  // 通过自定义属性判断是否选中Apple（比文本判断更健壮）
  if ($selectedOption.data('fruit-type') === 'apple') {
    // 发起AJAX请求获取动态值
    $.ajax({
      url: '/your-api-endpoint', // 替换为实际接口地址
      method: 'GET', // 根据接口要求选择GET/POST
      dataType: 'json',
      success: function(res) {
        const THISVARIABLE = res.targetValue; // 替换为响应中对应字段名
        // 更新选项的value属性
        $selectedOption.val(THISVARIABLE);
        // 触发change事件同步Select2内部状态，避免显示与实际值不一致
        $('#fruit').trigger('change');
      },
      error: function() {
        console.error('获取动态值失败，请检查接口');
        // 可添加用户提示逻辑，比如alert('获取数据失败')
      }
    });
  }
});

关键细节说明 #

• 事件选择：使用Select2的select:select事件而非原生change事件，能精准捕获Select2的选中动作，避免原生事件的触发时机冲突。
• 状态同步：更新option的value后必须触发change事件，让Select2同步内部缓存的选项数据，否则会出现「显示正确但实际提交值为空」的问题。
• 判断逻辑：优先用自定义属性（如data-fruit-type）判断选项，而不是依赖文本内容，这样后续修改选项文本时不需要调整JS逻辑。
• 异步处理：AJAX请求是异步的，必须在success回调中完成赋值操作，不能在请求外部直接使用THISVARIABLE，否则会拿到未定义的结果。

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