Cross posting from StackOverflow:
I added a link to the options, but when clicked only the option is selected. How do I make the link open without making a selection?
$(document).ready(function() {
$('.js-select-multi').select2({
placeholder: 'Select an option',
templateResult: formatOption
});
function formatOption (option) {
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 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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
<div id="main">
<select class="js-select-multi" name="demos[]" id="userInput" style="width: 650px;" multiple="multiple">
<optgroup label="Opt Group 1">
<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>
</optgroup>
<optgroup label="Opt Group 2">
<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>
</optgroup>
</select>
</div>