Select2下拉框为新增选项绑定点击事件以显示文本框如何实现？

你当前的代码存在两个核心问题：

• Select2的下拉选项是动态渲染的DOM元素，直接写内联onClick容易出现全局函数作用域匹配失败的问题
• 点击按钮时会触发Select2默认的选项选中行为，额外触发选择事件，不符合功能预期

改造步骤 #

1. 修改JS配置代码 #

移除按钮的内联点击事件，改用事件委托绑定动态元素的点击逻辑，同时阻止事件冒泡避免触发Select2默认行为，完整修改后的JS代码如下：

$('#add_penilai').select2({
  placeholder: 'Change Name',
  tags : true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");
    $result.text(data.text);
    if (data.newOption) {
      // 移除内联onClick，新增自定义类add-new-item-btn用于事件绑定
      $result.append(`<button type="button"
            class="btn btn-secondary btn-sm ml-10 add-new-item-btn"> + Add New Item</button>`);
    }
    return $result;
  },
  escapeMarkup: function (markup) {
    return markup;
  }
});

// 事件委托绑定新增按钮点击事件，绑定到静态父级即可适配动态生成的元素
$(document).on('click', '.add-new-item-btn', function(e) {
  // 阻止冒泡，避免触发Select2默认的选项选中逻辑
  e.stopPropagation();
  // 移除隐藏类，显示文本输入框
  $('#divisi').removeClass('form-control-hide');
  // 可选优化：自动把用户当前搜索的关键词填充到输入框
  const searchTerm = $('#add_penilai').data('select2').dropdown.$search.val();
  $('#divisi').val(searchTerm);
  // 可选优化：点击后自动关闭Select2下拉框
  $('#add_penilai').select2('close');
});

2. 其余代码无需改动 #

你原有的CSS、HTML代码可以完全保留，不需要调整。

效果验证：搜索不存在的选项时，点击「+ Add New Item」按钮即可自动显示隐藏的文本输入框。

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