Make text item invisible of DropDownList-A when a item of DropDownList-B is selected

Viewed 72

Dropddown List A has 2 items, this DropddownList has no dependency on another dropdown list

Dropddown List B has 8 items, this DropddownList has dependency on DropddownList A

Items can be selected from Dropddown List B only if in Dropddown List A the selected item is Consultant

On the other hand, if in Dropddown List A the selected item is Company, no Item can be selected from Dropddown List B

This is the problem

Previously if an Item had already been selected in DropddownList B and the Item Company is selected in DropddownList A

causes that in DropddownList B it is not possible to select an Item but the Item that was selected before the change in DropddownList A is seen as selected in DropddownList B which should not be so.

That is the problem. Any advice is welcome

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        var ddListA = $('[id*=ddListA]');
        var ddListB = $('[id*=ddListB]');

        $(document).ready(function () {
            if (ddListA.val() == "Company") {
                ddListB.prop('disabled', true);
            } else {
                ddListB.prop('disabled', false);
            }

            ddListA.change(function () {
                if (ddl.val() == "Company") {
                    ddListB.prop('disabled', true);
                } else {
                    ddListB.prop('disabled', false);
                }
            });
        });    


    </script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div class="container">
        <br>
        <hr>

        <div class="dropdown">
            <select id="ddListA" name="DropDownList A">
                <option value="none"> </option>
                <option value="Company">Company</option>
                <option value="Consultant">Consultant</option>
              </select>
          </div>
        <hr>

        <div class="dropdown">
            <select id="ddListB" name="DropDownList B">
                <option value="none"> </option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
                <option value="60">60</option>
                <option value="70">70</option>
                <option value="80">80</option>
              </select>
          </div>

        <hr>
        <br>

    </div>
</body>
</html>

Issue:

issue

Design-dropdowns:

design-dropdowns

1 Answers

You can use selectedIndex to 0 like prop("selectedIndex", 0).val() to clear second drop down selection.

$(document).ready(function() {
  var ddListA = $('[id*=ddListA]');
  var ddListB = $('[id*=ddListB]');
  if (ddListA.val() == "Company") {
    ddListB.prop('disabled', true);
  } else {
    ddListB.prop('disabled', false);
  }

  ddListA.change(function() {
    if (ddListA.val() == "Company") {
      //ddListB.prop('disabled', true);
      ddListB.prop('disabled', true).prop("selectedIndex", 0).val();
    } else {
      ddListB.prop('disabled', false);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <br>
  <hr>

  <div class="dropdown">
    <select id="ddListA" name="DropDownList A">
      <option value="none"> </option>
      <option value="Company">Company</option>
      <option value="Consultant">Consultant</option>
    </select>
  </div>
  <hr>

  <div class="dropdown">
    <select id="ddListB" name="DropDownList B">
      <option value="none"> </option>
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
      <option value="60">60</option>
      <option value="70">70</option>
      <option value="80">80</option>
    </select>
  </div>

  <hr>
  <br>

</div>

Related