通过浏览 select2 选项显示产品图片

Question

我有最新版本的 select2 产品系列，我想在浏览产品时根据我的 select2 光标在单个 img 标签上动态显示产品的图像，这样我就可以确保产品 i' m 即将选择的是正确的产品，因为某些产品具有相似的名称。

我的 select2 选项基于使用 ajax 选择的客户 ny onchange

到目前为止，我尝试使用 'on' 和 select2:selecting listener，但它不起作用。

这是我的进展：

的HTML：

<select type="text" class="js-example-basic-single"
    style="width: 100%" id="search" onchange="toCart()">
</select>

jQuery：

$('#search').on('select2:selecting', function () {
    console.log($(this).val());
});

如果您发现我的问题含糊不清，请发表评论，以便我改进我的问题。 谢谢你。

Answer 1

这是一个使用 vanilla javascript 的演示，使用 onchange 事件处理程序和相对于文档的 css 选择器从下拉列表中获取选定的选项； 并检索给定选择的所有选项：

 function getOptionsFromSelect(selectId){ const options = document.querySelectorAll(`#${selectId} option`); const values = [...options].map(option => option.value); console.log(values); } function toCart(selectEl){ //gets the value of the selected option coming from the element triggering the event const value = selectEl.value; console.log(`you selected the option with value: ${value}`); } function findSelectedOption(){ //selects the selected option using am absolute css selector relative to the whole document const selectedOption = document.querySelector('#search option:checked'); const value = selectedOption?.value; console.log(`you selected the option with value: ${value}`); }

 <select id="search" onchange="toCart(this);"> <option value="NONE" selected>Select an option...</option> <option value="A">Option A</option> <option value="B">Option B</option> <option value="C">Option C</option> <option value="D">Option D</option> </select> <button onclick="findSelectedOption();">Click to know selected option</button> <button onclick="getOptionsFromSelect('search');">Click to know available options</button>

Answer 2

在我看来，您正在寻找一种从 select2 下拉菜单中获取突出显示的选项文本和值的方法。

选择事件不是为此进行的。 它会在您选择某些内容之前触发，在您单击它或按 Enter 键的那一刻。

select2 不提供“突出显示/悬停”事件，如果您不想修改它，则获取突出显示的字段需要您使用捕获事件阶段或突变观察者。

这是捕获事件的示例：

 $('#example').select2() .on("select2:opening", () => ($(img).show(), onHighlight())) .on("select2:closing", () => ($(img).hide(), onHighlight())); function onHighlight(event) { /* both events are stopped at the element to prevent the page from scrolling when using arrow keys from within the search field this means, the capture phase is required and since the dropdown is not build when the event triggers, you have to wait for a short moment with setTimeout or requestAnimationFrame */ setTimeout(() => { // only for the "#example" select2 const el = document.querySelector(`[id^="select2-example-"].select2-results__option--highlighted`); if (el) { // depending on the id of the original select, the value to slice differs const value = el.id.split("-").slice(4).join("-"), text = el.innerText; // set the image matching the text and value img.src = `https://dummyimage.com/300x100/000/ffffff?text=value:${value}+text:${text}`; console.log(value, text); } }); } document.body.addEventListener("mouseenter", onHighlight, true); document.body.addEventListener("keydown", onHighlight, true);

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> <select id="example" multiple="multiple" style="width: 100%;"> <option value=0>January</option> <option value=1>February</option> <option value=2>March</option> <option value=3>April</option> <option value=4>May</option> <option value="Än Êxámplè">Foobar</option> </select> <img id="img" style="position: fixed; top: 0; left: auto; right: 0; display: none; z-index: 1234">

Answer 3

select2事件似乎不适合您的方案。

select2:selecting事件是一个“预选”——即用户选择了一个元素并且该事件允许您的代码取消该选择。

使用select2内置的templateResult模板，您可以在下拉列表中创建任何 DOM，从而将事件应用于这些 DOM 元素。

---

不幸的是，如评论中所述，每个 select2 li都有一些填充/边框，这意味着在内部（模板化）元素上使用事件不会在整个li上触发，即使有一些缓解措施，例如设置 100% 宽度。

相反，您可以收听.select2-results__option

---

然后，您只需向内部模板化 html 添加足够的信息，以便您可以创建预览。 这是使用原始<option> value=的示例：

 $('.select2').select2({ templateResult: template }); function template(state) { if (!state.id) { return state.text; } var $state = $(`<span class='mySelect2Option' data-value='${state.element.value}'>` + state.element.text + "</span>"); return $state; } $(document).on("mouseenter", ".select2-results__options>.select2-results__option", function() { var option = $(this).find(".mySelect2Option"); $("#preview").text(option.data("value")) });

 #preview { float: right; margin-right: 5em; /* so not hidden by [result] */ width: 2em; border: 1px solid #ccc; padding: 1em; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script> <div id='preview'></div> <select class="select2"> <option value="AL">Alabama (longer entry)</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select>