在选择DropDownList-B项时，使DropdownList-A无形的文本项答案

【问题标题】：Make text item invisible of DropDownList-A when a item of DropDownList-B is selected在选择DropDownList-B项时，使DropdownList-A无形的文本项
【发布时间】：2021-08-27 23:33:19
【问题描述】：

Dropddown List A 有 2 项，这个 DropddownList 不依赖另一个下拉列表

Dropddown List B有8个item，这个DropddownList依赖DropddownList A

只有在下拉列表 A 中选择的项目是顾问时，才能从下拉列表 B 中选择项目

另一方面，如果在下拉列表A中选择的项目是公司，则不能从下拉列表B中选择任何项目

这就是问题

之前，如果已在 DropddownList B 中选择了一个项目，并且在 DropddownList A 中选择了项目公司

导致在 DropddownList B 中无法选择一个项目，但在 DropddownList A 中更改之前选择的项目被视为在 DropddownList 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>

问题：

设计下拉菜单：

【问题讨论】：

html 在哪里？无法使用服务器端代码调试前端
另外，当代码与此插件无关时，请勿标记jQuery Validate。已编辑。谢谢。
它是一个 .aspx 文件，我只需要 JavaScript 方面的帮助，前端工作正常
那个asp文件将html发送到问题所在的浏览器。如果您需要有关 javascript 的帮助，您需要提供足够的相关 html 来按照minimal reproducible example 运行它。从页面源代码或浏览器开发工具复制并不难
我刚刚提供了合适的 html 来帮助我解决这个问题。谢谢:)

标签： javascript jquery validation jquery-events

【解决方案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>

【讨论】：

Shree，因为我需要您的推荐，所以非常有效，非常感谢您的贡献！。祝福
很高兴为您提供帮助:)