Question

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

我添加了一张图片来描述更多Dynamic Dropdown 正如你所看到的，我将从Sweet或Sour中选择Flavor。

所以，如果我选择Flavor： Sweet 。它将显示另一个尺寸和数量下拉列表。

但是，如果我选择Flavor：酸。它只显示大小的下拉列表并隐藏数量下拉列表。

我尝试在线搜索但无济于事。我只发现了这个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>

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

选择上一个下拉列表时出现新下拉列表

1 个答案: