Tengo un formulario con detalles de educación en el que hay un menú desplegable que da 4 opciones
ahora lo que estoy haciendo es permitir que el usuario complete esos detalles, pero lo que quiero es que el usuario no pueda seleccionar un tipo de educación más de una vez, lo que significa que el usuario puede seleccionar la educación una vez, la graduación una vez y así sucesivamente y esta validación que quiero en el extremo del cliente que es js/jquery
function checkUserEducation() { const userSelectedEducationArray = $("select[name='educationType[]']").map(function() { return $(this).val(); }).get(); //checks if any education type is empty if (userSelectedEducationArray.includes("")) { $('#educationErrorMsg').show(); } else { $('#educationErrorMsg').hide(); } if (countElement('schooling', userSelectedEducationArray) > 1) { // $('#educationErrorMsg').show(); $('#educationErrorMsg').after("*schooling can be chosen only one time"); } else { } if (countElement('graduation', userSelectedEducationArray) > 1) { $('#educationErrorMsg').after("</br>*graduation can be chosen only one time"); } else { } if (countElement('post_graduation', userSelectedEducationArray) > 1) { $('#educationErrorMsg').after("</br>*post graduation can be chosen only one time"); } else { } if (countElement('others', userSelectedEducationArray) > 1) { $('#educationErrorMsg').html("</br>*others can be chosen only one time"); } else { } } function countElement(item, array) { var count = 0; $.each(array, function(i, v) { if (v === item) count++; }); return count; }esta validación que estoy tratando de hacer pero no obtengo el resultado apropiado, así que cualquier ayuda con respecto a esto
<select class="form-control" id="educationType" name="educationType[]" aria-label="Select Education Type"> <option selected value="">Select type</option> <option value="schooling">Schooling</option> <option value="graduation">Graduation</option> <option value="post_graduation">Post Graduation</option> <option value="others">Others</option> </select>este es mi menú desplegable de selección en el que quiero validación, por lo que cualquier sugerencia o sugerencia de validación sería muy útil ¡GRACIAS!
El inglés no es mi idioma principal, pero haré todo lo posible para explicarlo. Asigne la misma clase a todas las selecciones que desea verificar y luego cambie la función de bucle a través de todos los elementos con la clase dada si está utilizando un repetidor de formulario y luego compare el nombre de los elementos para evitar compararlos con el mismo elemento. si no está utilizando un repetidor de formulario, agregue un elemento de "contador de datos" y aumente su valor en cada nuevo agregado,
después de eso, simplemente compare el valor del elemento, si es el mismo, muestre la alerta
var count = 1; $(document).on("click", ".add-btn", function () { $("#clone") .find(".gg").addClass('test-select') .attr("data-counter", count++); $("#Main").append($("#clone").html()); $("#clone") .find(".gg").removeClass('test-select'); }); $(document).on("change", ".test-select", function () { const This = $(this); $(".test-select").map(function() { if(this.getAttribute('data-counter') !== $(This).attr('data-counter')){ if($(this).val() == $(This).val()){ alert('repeat'); $(This).css('background-color','red') } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>stack question</title> </head> <body> <div id="Main" class="row p-1"> <div class="col-md-8"> <select class="form-select test-select" data-counter="0" name="test[]" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-md-4"> <button type="button" class="btn btn-primary add-btn">Add</button> </div> </div> <div class="d-none" id="clone"> <div class="mt-2"></div> <div class="col-md-8"> <select class="form-select gg test-select" data-counter="" name="test[]" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="col-md-4"> <button type="button" class="btn btn-primary add-btn">Add</button> </div> </div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $("#educationType").change(function(){ if($(this).val() && !$(this).find('option:selected').attr("data-clicked")){ $(this).find('option:selected').attr("data-clicked","true") }else if($(this).find('option:selected').attr("data-clicked")){ alert(`"${$(this).val().toUpperCase()}" can be chosen only one time`); $(this).val("") } }) </script>