Search option index via option text

Question

Hi is there anyway to return the index of an option by it's text? (without jquery or any lib)

<select>
     <option>I</option> //0
     <option>Love</option> //1
     <option>my</option> //2
     <option>granny<option> //3
</select>

say for example I'll pass a string "granny" it'll return 3

Just to clarify, do you mean (a) a function that you will send "granny" to, and it will look through the options and return 3 for you, or (b) when the user selects "granny" on the front-end you want to know that it was number 3 that was selected? — wwkudu, May 31 '14 at 05:57

score 1 · Answer 1 · answered May 31 '14 at 05:50

1

If you have a select element that looks like this:

<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>

Running this code:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

answered May 31 '14 at 05:50

Harjeet Singh

388
2
6
22

If you copy your answer from somewhere you must give the reference atleast.. Original answer http://stackoverflow.com/a/1085810/2260614 – Bhavik May 31 '14 at 05:53
I appreciate your answer, but what if I would not select "granny" option on the drop down list? + not by value, but by it's text or innerHTML.. anyway, I already answered my own question via loop. – flix Jun 03 '14 at 14:03

score 1 · Accepted Answer · answered Jun 03 '14 at 13:55

Sorry for being inactive for few days, here's the one I made, It'll return the index of an option based on the needed string, not the value. I just thought there's an easy function to do the process but I think there's none. just in case, this will do.

HTML

<select id = "myDropDown">
     <option>I</option> //0
     <option>Love</option> //1
     <option>my</option> //2
     <option>granny<option> //3
</select>

Javascript

var dropDownList = document.getElementById("myDropDown");
var str = "granny";
var i =0;
for(i=0;i<dropDownList.length;i++){
    if(dropDownList.options[i].text == str){
        console.log("index: " + i);
    }
}

score 0 · Answer 3 · answered May 31 '14 at 05:46

0

<select>
 <option value="0">I</option> //0
 <option value="1">Love</option> //1
 <option value="2">my</option> //2
 <option value="3">granny<option> //3
</select>

answered May 31 '14 at 05:46

Tanatos

1,857
1
13
12

thanks anyway, I already solved it using loops and conditional statements. – flix May 31 '14 at 06:02

score 0 · Answer 4 · answered May 31 '14 at 05:52

Getting the index
Fiddle
Javascript code

function findIndex() {
    var e = document.getElementById("select1");
    alert(e.selectedIndex);
}

HTML

<select id="select1" onchange="findIndex()">
    <option>I</option>
    <option>Love</option>
    <option>my</option>
    <option>granny</option>
</select>

score 0 · Answer 5 · answered May 31 '14 at 05:58

I think you want to retrieve the selected Index on change event of Select so you can try the following Code.

jsFiddle

HTML

<select id="select1">
     <option>I</option> 
     <option>Love</option>
     <option>my</option> 
    <option>granny</option>
</select>

JavaScript

var select1=document.getElementById("select1");
select1.onchange=function(){
var s=document.getElementById("select1").selectedIndex;
alert(s);
}

score -1 · Answer 6 · answered May 31 '14 at 05:48

-1

yes and example here from w3chools

http://www.w3schools.com/jsref/prop_option_value.asp

answered May 31 '14 at 05:48

Carlo

33
1
5

Search option index via option text

6 Answers6