select an option in already populated select tag using JS

Question

Suppose I have a select tag as following:

<select name='selectBox' id='selectBox'>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>
    <option value='5'>five</option>
</select>

and I have a value in a variable, for example: selectVal = 'three' and I want to select the option based on text not on value.

I looked on

$('#selectBox').prop('selectedIndex', 3);
$('#selectBox').selectmenu('refresh');

But I want to select on text of option. I'm beginner in this stuff, any help will be highly appreciated!

Thanks.

Possible duplicate of [How to select an option by its text?](https://stackoverflow.com/questions/3744289/how-to-select-an-option-by-its-text) — Dexygen, Aug 12 '18 at 11:30
Possible duplicate of [How to populate the options of a select element in javascript](https://stackoverflow.com/questions/6601028/how-to-populate-the-options-of-a-select-element-in-javascript) — Feras Al Sous, Aug 12 '18 at 11:31

score 1 · Answer 1 · answered Aug 12 '18 at 11:32

1

You have to get the options index:

 var options = $("#selectBox > option");
 $('#selectBox').prop('selectedIndex', options.index(":contains(three)"));

answered Aug 12 '18 at 11:32

Jonas Wilms

132,000
20
149
151

score 1 · Accepted Answer · answered Aug 12 '18 at 11:37

1

try this:-

var text = "five"
$(document).ready(function() {
  $('#selectBox option').each(function(index){
    if($(this).text() === text){
        $('#selectBox').prop('selectedIndex', index);
    }
  })
});

answered Aug 12 '18 at 11:37

Atul

420
2
10

score 1 · Answer 3 · answered Aug 12 '18 at 11:38

You can try the following way by using each():

let selectVal = 'three';
$('#selectBox option').each(function(){ 
  if($(this).text() == selectVal)
    $('#selectBox').prop('selectedIndex', 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='selectBox' id='selectBox'>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>
    <option value='5'>five</option>
</select>

score 0 · Answer 4 · answered Aug 12 '18 at 11:45

0

This is pure vanilla js

var element = document.getElementById(id);
element.value = valueToSelect;

answered Aug 12 '18 at 11:45

veejay grateja

51
1
7

select an option in already populated select tag using JS

4 Answers4