I have two < select > that allow users to choose from.

Condition

1. if the user selects "Test" from "id=select1", it required the user to select an option from "id=select2".
2. if the user selects "Exam" from "id=select1", it is not a must for the user to select an option from "id=select2".

Below shows how my code will look like

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");
  }
})

CodePudding user response：

Your code will only check right after loading whether a particular option in the first select box was chosen. You will need to set up an event listener for the select box and - ideally - a validation function for the <form> element.

The below script demonstrates how to automatically choose a valid option (="test2") in the second select box, whenever the option "Test" was chosen in the first.

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>

CodePudding user response：

Recommend to have a generic validate function to fetch all required fields in a form or container. Then check for provided input and alter required or mandatory class to the fields.

Try below snippet for specifically to your selection validation:

$(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 ></label>

CodePudding user response：

Try this out:

$('#select1').on('change', function() {
  if($('#select1').val() == 'TEST') { 
    $("select2").prop('required',true);
  } else if ($('#select1').val() == 'EXAM') {
    $('#select2').removeAttr('required');
  }
});