如何在Select2 4.0.x版本的下拉选项中添加可点击锚点链接

你当前的代码已经能在Select2选项中渲染出「Preview」链接，但点击无法触发跳转，核心原因是Select2 4.x版本会拦截下拉列表项内的点击事件，阻止默认行为与事件冒泡，导致<a>标签的跳转逻辑失效。

解决方案：事件委托监听链接点击 #

通过事件委托监听Select2下拉容器内的链接点击，手动触发跳转并阻止事件冒泡，避免Select2误选中对应选项。

修改后的完整代码如下：

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="section">
  <h1>This is a Select2</h1>

  <div class="row">
    <div class="col-md-12">
      <select class="js-select-multi" name="demos[]" id="userInput" style="width: 650px;">
        <option>Select</option>
        <option value="90d1aba6" data-details="Customer" data-url="https://yahoo.com">Option #1</option>
        <option value="238e894f" data-details="Customer" data-url="https://yahoo.com">Option #2</option>
        <option value="574b18e9" data-details="Customer" data-url="https://yahoo.com">Option #3</option>
        <option value="5b626e8b" data-details="Customer" data-url="https://yahoo.com">Option #4</option>
      </select>
    </div>
  </div>
</div>

JavaScript 代码

// 初始化Select2
var select2 = $(".js-select-multi").select2({
  templateResult: format,
  allowClear: true
}).data('select2');

// 格式化选项内容
function format(option) {
  if (!option.id) {
    return option.text; // 处理optgroup
  } else {
    var $option_head = $(
      '<div style="display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;">'
    );

    var $option_text = $(
      '<div style="font-size: 14px; min-width: 70%; height: 100%;">' + option.text + '</div>'
    );
    $option_head.append($option_text);

    if ($(option.element).data('details')) {
      var $option_details = $(
        '<div style="font-size: 10px; min-width: 70%; height: 100%;">' + $(option.element).data('details') + '</div>'
      );
      $option_head.append($option_details);
    }

    if ($(option.element).data('url')) {
      var $option_url = $(
        '<div style="font-size: 9px; height: 100%; width: 30%;"><a class="link" href="' + $(option.element).data('url') + '">Preview</a></div>'
      );
      $option_head.append($option_url);
    }

    return $option_head;
  }
}

// 监听Select2下拉框内的链接点击事件
$(document).on('click', '.select2-results__option .link', function(event) {
  // 阻止事件冒泡，避免Select2选中该选项
  event.stopPropagation();
  // 获取链接地址并跳转，可根据需求改用window.open()打开新窗口
  window.location.href = $(this).attr('href');
});

关键代码说明 #

1. 事件委托监听：使用$(document).on('click', '.select2-results__option .link', ...)监听下拉选项内的链接点击，因为Select2的下拉项是动态生成的，事件委托能确保新渲染的选项也能触发事件。
2. 阻止事件冒泡：调用event.stopPropagation()避免点击事件传递到Select2的选项容器，防止Select2将该选项标记为选中状态。
3. 手动触发跳转：通过window.location.href直接触发页面跳转，若需要在新窗口打开链接，可替换为window.open($(this).attr('href'), '_blank')。

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