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](https://stackoverflow.com/questions/16202254/ng-options-with-disabled-rows) ? — Shaheryar.Akram, Dec 03 '18 at 11:53

score 4 · Accepted Answer · answered Dec 03 '18 at 12:11

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>

Your welcome @JIJOMONK.A.. Thanks for accept my answer plz vote up :) — Mayank Vadiya, Dec 03 '18 at 12:18

How to disable an Option in a select box using angularjs

1 Answers1