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

Question

下拉列表 A 有 2 个项目，此 DropddownList 不依赖于另一个下拉列表

下拉列表 B 有 8 个项目，此 DropddownList 依赖于 DropddownList A

只有在下拉列表 A 中 selected 项目是顾问select，才能从下拉列表 B 中编辑项目select

另一方面，如果在下拉列表 A 中 selected 项目是公司，则不能从下拉列表 Bselected 项目

这就是问题所在

以前如果一个项目已经在 DropddownList B 中 selected 并且项目公司在 DropddownList Aselected 中

导致在 DropddownList B 中不可能 select 一个项目，但是在 DropddownList A 中更改之前 selected 的项目在 DropddownList 中被视为 selected B 不应该这样。

这就是问题所在。欢迎任何建议

<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>

问题：

设计下拉菜单：

Answer 1

您可以像 prop("selectedIndex", 0).val() 一样使用 selectedIndex 到 0 来清除第二个下拉选择。

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

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

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

javascript

validation

jquery

jquery-events