How can I make the ddChild dropdown conditionally required and its selected value should not be the initial value(which is value="")

[asifakhtar]

How can I make the ddChild dropdown conditionally required and its selected value should not be the initial value(which is value=""), but only if the ddParent dropdown's selected value is 3, using the jQuery Validation Plugin.

<form id="myForm">
    <select name="ddParent" id="ddParent">
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <select name="ddChild" id="ddChild">
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>  
</form>

have using this plugin

https://jqueryvalidation.org/----https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js

 

[VBService]

Firstly, you can use the native behavior of <option> with the disabled attribute set up.

<form id="myForm">
    <select name="ddParent" id="ddParent">
        <option value="" disabled selected>Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <select name="ddChild" id="ddChild">
        <option value="" disabled selected>Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select> 
</form>

Even you can use css for <option disabled>. Something like that for example:

#myForm option[disabled] {
  background-color: black;
  color: white;
  font-weight: bold;
}

the ddChild dropdown conditionally ...
..., but only if the ddParent dropdown's selected value is 3 ...

IMHO you don't need to use jQuery Validation to achieve this functionality

<form id="myForm">
  <select name="ddParent" id="ddParent">
    <option value="" disabled selected>Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <select name="ddChild" id="ddChild">
    <option value="" disabled selected>Please select</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select> 
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#ddChild").hide();
    $("#ddParent").change(function() {
      if ($(this).val() === "3") {
        $("#ddChild").fadeIn();
      } else {
        $("#ddChild").fadeOut();
      }
    });
  });
</script>

 

[asifakhtar]

Hey, I want to use jquery validation plug-in here because I am already using it to validate other elements.