how to get option index based on option text

Question

i have try to find option index bases on option text. My HTML code is bellow.

<select multiple="multiple" onchange="dependentOptions.select(this); opConfig.reloadPrice();optionImages.showImage(this);" title="" class="multiselect product-custom-option" id="select_472" name="options[472][]" >
<option selected="selected" value="3364">Black </option>
<option selected="selected" value="3365">White </option>
<option value="3366">Cool Grey #9 </option>
<option value="3367">Red </option>
<option value="3368">Fire Red </option>
<option value="3369">Orange </option>
<option value="3370">Rich Yellow </option>
<option value="3371">Primrose Yellow </option>
<option value="3372">Light Green </option>
</select>

and my script is like this

jQuery("#select_472 select option:[text=Rich Yellow]").index();

but it return me -1 insted of 7

So please help me to sove this.

Second `select` is wrong in jQuery selection, you should remove it. — alpakyol, Oct 31 '14 at 11:43
Some other options here: http://stackoverflow.com/questions/813477/jquery-selector-where-text-some-value — Will, Oct 31 '14 at 11:51

score 4 · Accepted Answer · answered Oct 31 '14 at 11:43

4

You would use :contains pseudo-selector:

jQuery("#select_472 option:contains('Rich Yellow')").index();

answered Oct 31 '14 at 11:43

dfsq

191,768
25
236
258

Could be some issue with `:contains`, e.g between Fire Red and Red – A. Wolff Oct 31 '14 at 11:56
@A.Wolff Yes, it's a good point! Filter is a better choice here. – dfsq Oct 31 '14 at 11:59

Sudharsan S · Answer 2 · 2014-10-31T11:55:34.950

2

The index should be began on 0 so the text 'Rich Yellow' be index position is 6.

$("#select_472 option[value='3370']").index();

$("#select_472 option:contains('Rich Yellow ')").index();

Fiddle

edited Oct 31 '14 at 11:55

answered Oct 31 '14 at 11:50

Sudharsan S

15,336
3
31
49

1

`based on option text`. You're going off the value and not the text. – Ben Fortune Oct 31 '14 at 11:52
The one involving the "value = ..." is exactly what I have been looking for. All other answers on SO, some of them very clever, that I have found to achieve this task appear to use brute force looping through the options. But your way of getting the index from the value (apparently) doesn't. I therefore plussed you despite this not answering the OP's specific question! – mike rodent Aug 10 '17 at 18:12

score 1 · Answer 3 · answered Oct 31 '14 at 11:54

1

You could filter it (and trim text value), looks more safe:

jQuery("#select_472 option").filter(function(){
    return $.trim($(this).text()) === "Rich Yellow"
}).index();

answered Oct 31 '14 at 11:54

A. Wolff

74,033
9
94
155

how to get option index based on option text

3 Answers3