How to select a value in dropdown using option text rather than using option value in Angular JS

Question

I have the below code for binding a drop down using angular JS

<select ng-model="selectedOption" ng-options="item as item.Area for item in ItemOptions">
  <option value="">Select a value..</option>
</select>

Where ItemOptions is a an array.

var ItemOptions =[];

ItemOptions = [{C1,A1},{C2,A2},{C3,A3},{C4,A4}];

Finally When I select any option in dropdown the values are appearing just like below.

var country = $scope.selectedOption.Country;
 var area = $scope.selectedOption.Area;

If I want to select a value in above dropdown based on option text. For example

$scope.selectedOption.Area == 'A3'

How can I select a value based on the above criteria. The expected output would be as below.

<select ng-model="selectedOption" ng-options="item as item.Area for item in ItemOptions">
      <option value="C1">A1</option>
            <option value="C2">A2</option>
            <option value="C3" selected="selected">A3</option>
            <option value="C4">A4</option>
</select>

The answer is fine even if its from Javascript, Angular or Jquery

[this may give you an idea](https://code.angularjs.org/1.3.18/docs/api/ng/directive/ngSelected) — ODelibalta, Sep 15 '15 at 13:57

score 0 · Answer 1 · answered Sep 15 '15 at 14:30

This is how I would do it in jQuery, hopefully it helps.

$(function(){  
  $('#select-box option').prop('selected', false).filter(function(index){      
      return $(this).text() == 'A4';
    }).prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select-box" ng-model="selectedOption" ng-options="item as item.Area for item in ItemOptions">
  <option value="C1">A1</option>
  <option value="C2">A2</option>
  <option value="C3" selected="selected">A3</option>
  <option value="C4">A4</option>
</select>

How to select a value in dropdown using option text rather than using option value in Angular JS

1 Answers1