이전 드롭 다운을 선택하면 새 드롭 다운이 나타납니다

이전 드롭 다운에서 특정 데이터를 선택하면 에만 드롭 다운이 나타납니다.. 선택하지 않으면 표시되지 않습니다.이전 드롭 다운을 선택하면 새 드롭 다운이 나타납니다

나는이 Dynamic Dropdown 을 더 설명하는 그림을 포함하고 있습니다. 볼 수 있듯이, Sweet 또는 Sour에서 Flavor를 선택하겠습니다.

그래서 Flavor를 선택한 경우 Sweet입니다. 다른 크기 및 수량 드롭 다운이 표시됩니다.

하지만 맛을 선택한 경우 사우어입니다. 크기의 드롭 다운 만 표시되고 수량 드롭 다운은 숨겨집니다.

저는 온라인으로 검색하려고했지만 아무 소용이 없습니다. 나는 단지 AngularJS을 발견했으나 드롭 다운의 선택 만 비활성화했습니다. AngularJS에 대한 경험이 없습니다. html 또는 css 또는 javacript을 사용하여 드롭 다운을 할 수있는 방법이 있습니까?

이 문제를 해결하는 올바른 방법은 무엇입니까? 어떠한 제안 ? 사전에 감사합니다 :)

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="[email protected]" 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>

출처

2017-01-20 Far

합니다. 오랫동안 연구 끝에 html과 javacript을 사용하여 코드를 알아 냈습니다. 완벽하게 작동했습니다.

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

출처

2017-01-25 03:18:13 Far

이전 드롭 다운을 선택하면 새 드롭 다운이 나타납니다

답변

관련 문제