Tengo un problema después de usar niceSelect . Antes de esto, solo uso Javascript simple para mostrar y ocultar la tabla. Antes de usar niceSelect, funciona bien porque el value es solo value . Pero después de usar niceSelect, el value element dentro de la opción de selección se convierte data-value
HTML:
<select class="wide" id="selectTbl"> <option value="0" selected>Select</option> <option value="1">Admin</option> <option value="2">Mechanic</option> <option value="3">User</option> <option value="4">Business</option> </select>JavaScript:
document.getElementById('selectTbl').addEventListener('change', function () { $("#selectTbl").val(); var style = $(this).val() == 1 ? 'block' : 'none'; document.getElementById('TblAdmin').style.display = style; var style = $(this).val() == 2 ? 'block' : 'none'; document.getElementById('TblMech').style.display = style; var style = $(this).val() == 3 ? 'block' : 'none'; document.getElementById('TblUser').style.display = style; var style = $(this).val() == 4 ? 'block' : 'none'; document.getElementById('TblBiz').style.display = style; }); ¿Puede alguien ayudarme? Aquí quiero mostrar el div que es TblAdmin , TblMech , TblUser , TblBiz . Actualmente estoy usando NiceSelect pero dentro del menú desplegable de selección tiene un atributo de valor de datos. En realidad, no selecciona sino lista el elemento dentro de la lista desordenada.
Como la imagen que se muestra aquí, https://drive.google.com/file/d/1VyHDMb1Gl4PYBe19XZt1Z8Z-2OLAS1mx/view?usp=sharing
Ok, veo el problema. "cambiar" no funciona porque ya no es una 'selección' normal. Tienes que detectar clics y luego verificar el valor.
Pero le sugiero que no use esta biblioteca, parece abandonada y es muy limitada, no hay suficientes métodos. Además, jquery no se usa mucho en la actualidad.
Pero si quieres usar la biblioteca, puedes hacer algo como:
$(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function() { let val = $("#selectTbl").val() var style = val == 1 ? 'block' : 'none'; document.getElementById('TblAdmin').style.display = style; var style = val == 2 ? 'block' : 'none'; document.getElementById('TblMech').style.display = style; var style = val == 3 ? 'block' : 'none'; document.getElementById('TblUser').style.display = style; var style = val == 4 ? 'block' : 'none'; document.getElementById('TblBiz').style.display = style; })// NiceSelect plugin $(document).ready(function(){ $('#selectTbl').niceSelect(); }); document.getElementById('selectTbl').addEventListener('change', function () { $("#selectTbl").val(); var style = $(this).val() == 1 ? 'block' : 'none'; document.getElementById('TblAdmin').style.display = style; var style = $(this).val() == 2 ? 'block' : 'none'; document.getElementById('TblMech').style.display = style; var style = $(this).val() == 3 ? 'block' : 'none'; document.getElementById('TblUser').style.display = style; var style = $(this).val() == 4 ? 'block' : 'none'; document.getElementById('TblBiz').style.display = style; });¿Es esto correcto? @madprops