HTML
<div class="col-test" data-test="Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer">El usuario seleccionó varias opciones del menú desplegable y obtuvo valores
var test = $('#options').val(); console.log(test); // Array [ "Swimming pools", "Fitness center" ]Aquí está el código psudo
for each selectedTest data (from multiselect input) check if it exists in the data-test array if it does not exists: then show = false otherwise: do nothing and continue to check the next selectedTest (no code is needed here)Hay un problema con el siguiente código. Necesito asegurarme de que cada prueba seleccionada exista en la matriz de prueba de datos. No devuelve el resultado esperado. Hay algo problema con el código.
data-test="Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer" var $variable = $('.col-test'); if(test && test != null && test.length > 0) { console.log($varible.data('test')); var arryTest = $varible.data('test').split("|"); arryTest.forEach((singleTest) => { if(!test.includes(singleTest)){ show = false; }else{ //do nothing and continue to check the next selected Amenity } }); }Puedo ver que en la consola se están imprimiendo los resultados de las pruebas de datos una y otra vez. Creo que Loop no funciona.
Resultados
Piscinas|Gimnasio|Estacionamiento|Lavadora|Spa|Estacionamiento|Casa club|Servicio de recolección de residuos|Lavadora
Piscinas|Gimnasio|Estacionamiento|Lavadora|Spa|Estacionamiento|Casa club|Servicio de recolección de residuos|Lavadora|Piscinas|Gimnasio|Estacionamiento|Lavadora|Spa|Estacionamiento|Casa club|Servicio de recolección de residuos|Lavadora
Piscinas|Gimnasio|Estacionamiento|Lavadora|Spa|Estacionamiento|Casa club|Servicio de recolección de residuos|Lavadora|Piscinas|Gimnasio|Estacionamiento|Lavadora|Spa|Estacionamiento|Clubhouse|Servicio de recolección de residuos|Lavadora|Piscinas|Gimnasio|Estacionamiento| Lavadora|Spa|Estacionamiento|Casa club|Servicio de recolección de residuos|Lavadora
Considere el siguiente ejemplo.
$(function() { var dataTest = $("#col-test").val().split("|"); console.log(dataTest); $("#user-options").append("<option>Item 1</option>"); $.each(dataTest, function() { $("#user-options").append("<option>" + this + "</option>"); }); $("#user-options").append("<option>Last Item</option>"); $("#user-options").change(function() { var show = true; var options = $(this).val(); console.log("Selected Options", options); $.each(options, function(i, o) { if (dataTest.indexOf(o) == -1) { show = show && false; } }); console.log(show); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" id="col-test" value="Swimming pools|Fitness center|Parking|Washer|Spa|Parking|Clubhouse|Valet trash|Washer" /> <select id="user-options" multiple> </select> Cuando el usuario hace una selección, se activa un evento de change . Cuando haya un change , la selección del Usuario se comparará con la Lista de opciones. Si la opción tiene un índice de -1 , no existe en la lista y show se establecerá en falso.
No tenía un conjunto completo de opciones, por lo que tuve que crear una lista basada en los únicos datos que tengo, lo que significa que todas las opciones seleccionadas estarán en la lista y obtendrá true . Así que agregué "Artículo 1" y "Último artículo". Si cualquiera de los dos está seleccionado, obtiene false .