Enable to add anchor link in dropdown option in select2 Version 4.0.x

Question

I need to add the link tag inside the dropdown options tag,

I've already found the blogs, but it only works with 3.x.x version.

How do I make a link open in an option

https://forums.select2.org/t/how-do-i-make-a-link-open-in-an-option/1988

I want the same functionality in a higher version. like example 4.0.x

I'm able to show the link inside the options.

here you can see

Now when we click on the preview it should open the link.

Below is the code for references

//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);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 1

You can monitor the select2:select event and check which element is clicked with event.params.originalEvent.originalEvent.toElement to redirect when it is a link.

//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);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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://yahoo1.com">Option #1</option>
        <option value="238e894f" data-details="Customer" data-url="https://yahoo2.com">Option #2</option>
        <option value="574b18e9" data-details="Customer" data-url="https://yahoo3.com">Option #3</option>
        <option value="5b626e8b" data-details="Customer" data-url="https://yahoo4.com">Option #4</option>
      </select>
    </div>
  </div>

</div>