angular js disable selection when an value in another dropdown is choosed

Question

I have two dropdown lists. List1 has options a, b, c, d. List2 has options e, f, g, h. I want when a in List1 is selected. The value in List 2 should be e and at the same time disable the selection in List2. I would like to know how I can implement it? Thanks in advance!

    <div class="form-group">
        <label>List1 </label>
        <div class="col-sm-6">
            <select class="form-control" ng-model="list1">
                <option ng-repeat="option in list1Choice" value={{option}} ng-selected="option == list1" ng-bind="option"></option>
            </select>
        </div>
    </div>



    <div class="form-group">
        <label>List2 </label>
        <div class="col-sm-6">
            <select class="form-control" ng-model="list2">
                <option ng-repeat="option in list2Choice" value={{option}} ng-selected="option == list2" ng-bind="option"></option>
            </select>
        </div>
    </div>

yBrodsky · Accepted Answer · 2017-07-15 02:07:00Z

2

Here is one way to do it.

http://jsfiddle.net/muw4aect/

There are two key elements. One, the ng-disabled directive in the second select.

//when $scope.select1 is equal 'a'
ng-disabled="select1 == 'a'"

The second key element is the ng-change, that calls a function to set the value for the second select.

$scope.onChange = function() {
    if($scope.select1 == 'a') {
    $scope.select2 = 'e';
  }
}

Surely there are other ways to do it, this is just one.

answered Jul 15, 2017 at 2:07

yBrodsky

5,0614 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bunny Over a year ago

Thank you for the help!! Curious what are some other ways.

yBrodsky Over a year ago

@diane none I can think of lol. I just meant somebody else might come up with a different / better solution.

Collectives™ on Stack Overflow

angular js disable selection when an value in another dropdown is choosed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related