选择上一个下拉菜单时出现新的下拉菜单答案

【问题标题】：New Dropdown Appear When Previous Dropdown is Selected选择上一个下拉菜单时出现新的下拉菜单
【发布时间】：2020-06-06 02:58:47
【问题描述】：

我试图让下拉列表仅在从上一个下拉列表中选择特定数据时显示。如果未选中，则不会显示。

我附上一张图片来描述这个动态下拉列表的更多内容如您所见，我将选择甜味或酸味。

所以，如果我选择口味：甜。它将显示另一个尺寸和数量的下拉菜单。

但是，如果我选择风味：酸味。它只会显示尺寸下拉菜单并隐藏数量下拉菜单。

我曾尝试在线搜索，但无济于事。我只找到了这个AngularJS，但他们只禁用了下拉列表的选择。我没有使用 AngularJS 的经验。有没有办法使用 HTML 或 CSS 或 JavaScript 来做下拉菜单？

解决此问题的正确方法是什么？有什么建议吗？提前谢谢你:)

AngularJS：

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
      document.write('<base href="' + document.location + '" />')
    </script>
    <link rel="stylesheet" href="style.css" />
    <script
      data-require="angular.js@1.2.x"
      src="https://code.angularjs.org/1.2.25/angular.js"
      data-semver="1.2.25"
    ></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <label
      ><h4><b>Transaction Type</b></h4></label
    >
    <select
      id="transtype"
      style="margin: auto; width: 100%;"
      ng-model="data.transtype"
      ng-options="type.name for type in listOne"
      ng-disabled="isDisabled"
      ng-change="hideFields()"
    >
      <option value="" selected="selected">--Select Transaction Type--</option>
    </select>
    <br /><br />

    <label
      ><h4><b>Select Bank</b></h4></label
    >
    <select
      id="beneBank"
      style="margin: auto; width: 100%;"
      ng-model="data.beneBank"
      ng-options="type.name for type in listTwo"
      ng-disabled="disableFields"
    >
      <option value="" selected="selected">--Select Bank--</option>
    </select>
    <br /><br />
  </body>
</html>

【问题讨论】：

标签： javascript html css angularjs drop-down-menu

【解决方案1】：

在选择上一个下拉菜单时启用新出现的下拉菜单。经过长时间的研究，我已经找到了使用 html 和 javascript 的代码，它对我非常有效。

$(document).ready(function() {
    $('#size').hide();

     $('#flavor').change(function () {
        if ($('#flavor option:selected').text() == "Sweet"){
            $('#size').show();
        }
         else { 
              $('#size').hide();
         }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<select id='flavor' name = 'flavor'>  
    <option>------------</option>
    <option value='SW'>Sweet</option>
    <option value='SO'>Sour</option>
    
</select>

<select name='size' id='size'>
    <option>------------</option>
    <option>Small</option>";
    <option>Big</option>";
    
</select>

【讨论】：