Tengo dos < select > que permiten a los usuarios elegir.
Condición
A continuación se muestra cómo se verá mi código
html
<select id="select1"> <option id="chosenTest"> Test </option> <option> Exam </option> </select> <select id="select2"> <option> test1 </option> <option> test2 </option> </select>JS
$(function() { if ($("#chosenTest").is(":checked")) { $("#select2").is(":required"); } })Probar esto:
$('#select1').on('change', function() { if($('#select1').val() == 'TEST') { $("select2").prop('required',true); } else if ($('#select1').val() == 'EXAM') { $('#select2').removeAttr('required'); } });Su código solo verificará inmediatamente después de cargar si se eligió una opción particular en el primer cuadro de selección. Deberá configurar un detector de eventos para el cuadro de selección e, idealmente, una función de validación para el elemento <form> .
La siguiente secuencia de comandos muestra cómo elegir automáticamente una opción válida (="prueba2") en el segundo cuadro de selección, siempre que se haya elegido la opción "Prueba" en el primero.
var $sel; // global variable $sel function setSel2(){ if($sel.val()=="Test") $("#select2").val("test2") } $(function() { $sel=$("#select1").on("change",setSel2); setSel2(); }) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <form> <select id="select1"> <option id="chosenTest"> Test </option> <option> Exam </option> </select> <select id="select2"> <option> test1 </option> <option> test2 </option> </select> </form>Se recomienda tener una función de validación genérica para obtener todos los campos required en un form o container . Luego verifique la entrada provista y modifique la clase required u mandatory a los campos.
Pruebe el siguiente fragmento específicamente para la validación de su selección:
$(document).on('click', '#btnSubmit', function() { if ($('#select1').val() === '') { $('#select1').addClass('mandatory'); $('.message').removeClass('success').addClass('error').text('Please select mandatory fields'); } else if ($('#select1').val() === '' && $('#select2').val() === '') { $('#select1').addClass('mandatory'); $('#select2').addClass('mandatory'); $('.message').addClass('error').text('Please select mandatory fields'); // Avoid Backend operations } else if ($('#select1').val() === 'Test' && $('#select2').val() === '') { $('#select1').removeClass('mandatory'); $('#select2').addClass('mandatory'); $('.message').removeClass('success').addClass('error').text('Please select mandatory fields'); // Avoid Backend operations } else { $('#select1').removeClass('mandatory'); $('#select2').removeClass('mandatory'); $('.message').removeClass('error').addClass('success').text('Provided input is valid'); // Perform any operations } }); $(document).on('change', '#select1', function() { if ($('#select1').val() === '') { $('#select2').val(''); } }); .success { color: green; } .error { color: red; } .mandatory { border-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select1"> <option value=''>Please Select</option> <option value='Test'>Test</option> <option value='Exam'>Exam</option> </select> <select id="select2"> <option value=''>Please Select</option> <option value='test1'>test1</option> <option value='test2'>test2</option> </select> <button id="btnSubmit">Submit</button> <label class="message"></label>