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

Joined
Oct 24, 2013
Messages
45
Reaction score
0
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.

HTML:
<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
 
Last edited:
Joined
Jul 4, 2023
Messages
370
Reaction score
41
Firstly, you can use the native behavior of <option> with the disabled attribute set up.
HTML:
<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:
CSS:
#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
HTML:
<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>
 
Joined
Oct 24, 2013
Messages
45
Reaction score
0
Hey, I want to use jquery validation plug-in here because I am already using it to validate other elements.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,780
Messages
2,569,611
Members
45,284
Latest member
NicholeDum

Latest Threads

Top