jquery 启用select2版本4.0.x中的“添加锚链接”选项

00jrzges 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(138)

我需要将link标签添加到textoptions标签中，
我已经找到了博客，但它只适用于3.x.x版本。
如何在选项中打开链接
https://forums.select2.org/t/how-do-i-make-a-link-open-in-an-option/1988
我希望在更高版本中具有相同的功能。例如4.0.x
我可以在选项中显示链接。
在这里，您可以看到

现在，当我们点击preview时，它应该打开链接。
下面是参考代码

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

function format(option) {
  //console.log(option);
  if (!option.id) {
    return option.text; // optgroup
  } else {
    var $option_text = '';
    var $option_details = '';
    var $option_url = '';

    $option_head = $(
      '<div style="display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;">'
    );

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

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

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

    $option_foot = $(
      '</div>'
    );

    return $option_head.append($option_text).append($option_details).append($option_url).append($option_foot);
  }
}

个字符

jquery

来源：https://stackoverflow.com/questions/77589810/enable-to-add-anchor-link-in-dropdown-option-in-select2-version-4-0-x

1条答案

按热度按时间

hujrc8aj1#

您可以监视select2:select event，并检查使用event.params.originalEvent.originalEvent.toElement单击的重定向元素是否是链接。

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

$(".js-select-multi").on('select2:select', function(event) {
  console.log(event.params.originalEvent.originalEvent.toElement);
  var url = $(event.params.originalEvent.originalEvent.toElement).prop('href');
  console.log(url);

  if (url) {
    // window.location.href = url;
    console.log('window.location.href = url;');
  } else {
    console.log('does not redirect');
  }
});

function format(option) {
  //console.log(option);
  if (!option.id) {
    return option.text; // optgroup
  } else {
    var $option_text = '';
    var $option_details = '';
    var $option_url = '';

    $option_head = $(
      '<div style="display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;">'
    );

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

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

    if ($(option.element).data('url')) {
      $option_url = $(
        '<div style="font-size: 9px; height: 100%; width: 30%;"><a class="link" href="' + $(option.element).data('url') + '" style="cursor: crosshair; background-color: #00ff00;">Preview</a></div>'
      );
    }

    $option_foot = $(
      '</div>'
    );

    return $option_head.append($option_text).append($option_details).append($option_url).append($option_foot);
  }
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

jquery 启用select2版本4.0.x中的“添加锚链接”选项

1条答案

相关问题

热门标签

最新问答