Tengo la última versión de la colección de productos select2, y quiero mostrar la imagen del producto en una sola etiqueta img dinámicamente de acuerdo con mi cursor select2 mientras busco el producto para asegurarme de que el producto es Estoy a punto de elegir el producto correcto ya que algunos productos tienen un nombre similar.
Mis opciones select2 se basan en el cliente elegido ny onchange usando ajax
hasta ahora traté de usar 'on' y select2:selecting listener, y no funciona.
aquí está mi progreso:
el html:
<select type="text" class="js-example-basic-single" style="width: 100%" id="search" onchange="toCart()"> </select>el JQuery:
$('#search').on('select2:selecting', function () { console.log($(this).val()); });Si encuentra que mi pregunta es vaga, por favor deje un comentario para que pueda mejorar mi pregunta. gracias.
Me parece que está buscando una manera de obtener el texto y el valor de la opción resaltada en el menú desplegable select2.
El evento de selección no está hecho para esto. Se dispara justo antes de seleccionar algo, en el momento en que haces clic en él o presionas enter.
select2 no proporciona un evento de "resaltado/desplazamiento" y obtener el campo resaltado requiere que use la fase de evento de captura o un observador de mutación si no desea modificarlo.
Aquí hay un ejemplo con los eventos de captura:
$('#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">Los eventos select2 no parecen adaptarse a su escenario.
El evento select2:selecting es una "preselección", es decir, el usuario ha seleccionado un elemento y el evento permite que su código cancele esa selección.
Con la templateResult integrada en select2 , puede crear cualquier DOM en el menú desplegable y, por lo tanto, aplicar eventos a esos elementos DOM.
Desafortunadamente, como se señaló en los comentarios, cada select2 li tiene algo de relleno/borde, lo que significa que usar un evento en el elemento interno (plantilla) no se activará en todo el li , incluso con alguna mitigación, como establecer un ancho del 100 %.
En su lugar, puede escuchar en .select2-results__option
Luego, solo necesita agregar suficiente información al html con plantilla interna para que pueda crear su vista previa. Aquí hay un ejemplo usando el <option> value= original:
$('.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>