$0.79

How to vary `<options>` in `<select>` elements in AngularJS Forms

Ask a question+
1

I am working on something which requires to come up with different options for different selections as a list in forms.

For example: If I select DR9 in the System field, it has to show only 100,400,500 clients. Same for QR9 - only 400 and 500.

But in my case, it’s showing(100,400,500,400,500) repetitively.

Here is my code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
 <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>

    <div ng-app="">
        Password Reset
      <form>
        <br><label>System:</label> 
        <select ng-model="myVar">
            <option value = "DR9">DR9</option>
            <option value = "QR9">QR9</option>
            <option value = "PR3">PR3</option>
        </select>
        <br><br>
        <label>Client:</label>
        <select>
            <div ng-switch="myVar">
                <div ng-switch-when="DR9">
                    <option>100</option>
                    <option>400</option>
                    <option>500</option>
                </div>
                <div ng-switch-when="QR9">
                    <option>400</option>
                    <option>500</option>
                </div>
            </div>
        </select>
        </form>
     </div>
    </body>
</html>
add comment

0 Answer

Your Answer