How to disable an Option in a select box using angularjs

Question

I have two select boxes like below

<select ng-model="secondCountry" id="secondCountry"  required class="form-control" >
         <option ng-value="0">Select 2nd Country</option>
	 <option >india</option>
         <option >usa</option>
         <option >Japan</option>
 </select>
              

<select ng-model="thridCountry" id="thridCountry"   required class="form-control" >
	<option ng-value="0">Select 3rd Country</option>
	<option >india</option>
        <option >usa</option>
      <option >Japan</option>
</select>

My Goal is to disable or hide the option is selected on other that is , If i select the option India from first select box then I dont need to select the Option India from the second select box.

NOTE : Iam loading the options by using ng-repeat

I tried the ng-disabled="secondCountry" Property but this disables the entire select box.

How to manage this ???

possible duplicate of ng-options-with-disabled-rows ?

Zavi
– Zavi

2018-12-03 11:53:11 +00:00
Commented Dec 3, 2018 at 11:53 — Zavi
– Zavi, Commented Dec 3, 2018 at 11:53

Mayank Vadiya · Accepted Answer · 2018-12-03 12:11:22Z

4

You can manage this scenario with two way. You have to bind your second dropdown with ngChange event like Below:

First

<select ng-model="secondCountry" id="secondCountry"  required class="form-control" >
  <option ng-value="0">Select 2nd Country</option>
  <option>india</option>
  <option>usa</option>
  <option>Japan</option>
 </select>


<select ng-model="thridCountry" id="thridCountry" ng-change="change()"  required class="form-control" >
 <option ng-value="0">Select 3rd Country</option>
 <option>india</option>
 <option>usa</option>
 <option>Japan</option>
</select>

$scope.change = function() {
  if($scope.secondCountry == $scope.thridCountry){
     $scope.thridCountry = '0';
  }
};

Second

you have disable those option which is selected on first dropdown with ngDisabled.

<select ng-model="thridCountry" id="thridCountry" ng-change="change()"  required class="form-control" >
    <option ng-value="0">Select 3rd Country</option>
    <option ng-disabled="secondCountry=='india'">india</option>
        <option ng-disabled="secondCountry=='usa'">usa</option>
      <option ng-disabled="secondCountry=='Japan'">Japan</option>
</select>

answered Dec 3, 2018 at 12:11

Mayank Vadiya

1,4512 gold badges19 silver badges32 bronze badges

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

1 Comment

Mayank Vadiya Over a year ago

Your welcome @JIJOMONK.A.. Thanks for accept my answer plz vote up :)

Collectives™ on Stack Overflow

How to disable an Option in a select box using angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related