javascript how to use index of not with select array

Question

I have a value, call it a, and a select box with id = "sid". I'm in javascript and want to know if my value a is one of the options in the select box.

I got this far: HTML:

<select id = "sid">
  <option>a</option>
  <option>b</option>
</select>
<script>
  isThere('sid')
</script>

Javascript:

function isthere(id) {
  var x = document.getElementById(id).options;

  for (j = 0; j<= 1; j++) {
  alert ("arr is " + x[j].text );
} 

var c = x.text.indexOf("a");
  alert ("c is " + c);
}

The loop gives the right answers for x[j].text. I don't get a value for c. Firebug gives me the error "x.text is undefined".

What is the right way to use indexOf find out if "a" is in this select box? And efficiency-wise, would I be better off just looping through x.text[j]?

Your c and x.text is not in the loop. Must be x[j].text by the way — alexpods
– alexpods, Commented Jan 12, 2015 at 19:04
x is a NodeList. NodeLists don't have a property text. — Felix Kling
– Felix Kling, Commented Jan 12, 2015 at 19:07
Actually x is an HTMLOptionsCollection. But yeah there's no text property. — Aaronius
– Aaronius, Commented Jan 12, 2015 at 19:07
@Aaronius: I thought the collections extend NodeList, but apparently they don't... — Felix Kling
– Felix Kling, Commented Jan 12, 2015 at 19:08

Oriol · Accepted Answer · 2015-01-12 19:10:48Z

4

You can use indexOf if you have an array of values.

To get an array of values, you can use

[].map.call(x, function(option) {
    return option.value;
});

Therefore, you can use

[].map.call(x, function(option) {
    return option.value;
}).indexOf("a");

In ECMAScript 6, you can simplify it to

[].map.call(x, option => option.value).indexOf("a");

var x = document.getElementById("sid");
alert([].map.call(x, function(option) {
  return option.value;
}).indexOf("a"));

<select id="sid">
  <option>a</option>
  <option>b</option>
</select>

edited Jan 12, 2015 at 19:10

answered Jan 12, 2015 at 19:05

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

David Laberge Over a year ago

indexOf is quite recent on array in Javascript (ecmascript 5) you might have issues with older browser. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

six fingered man Over a year ago

@DavidLaberge: So is .map() and .some().

Betty Mock Over a year ago

Hi Oriol, I tried the [].map.call etc. and got an error "x is not defined". This is after x[0].text and x[1].text show correctly. I tried changing x to document.getElementById("sid") without the .option, same result. Also, shouldn't it be option.text? My browser is Firefox 34.0-- don't think it is old.

Oriol Over a year ago

@BettyMock You define x inside a function but then you use it outside. Define it outside instead. It doesn't matter much if you use value or text, because the value of an option element is the value of the value content attribute, if there is one, or, if there is not, the value of the element's text IDL attribute.

Oriol Over a year ago

@BettyMock ES5 array methods like map usually iterate slower than for loops. Moreover, map creates a new array, which will be iterated again by indexOf. So for loops are probably faster and require less memory.

|

lante · Accepted Answer · 2015-01-12 19:15:51Z

0

You can do it this way:

function isThere(id, value) {
    return Array.prototype.some.call(document.getElementById(id).options, 
        function (i) { return i.value === value });
}

Note that I added the value param to the function.

See the fiddle working.

edited Jan 12, 2015 at 19:15

answered Jan 12, 2015 at 19:10

lante

7,3924 gold badges39 silver badges59 bronze badges

Comments

Inanda Menezes · Accepted Answer · 2015-01-12 19:33:04Z

0

This way:

    function isThere(id, value) {
        for (i = 0; i < document.getElementById(id).length; ++i){
            if (document.getElementById(id).options[i].value === value){
              return true;
            }
        }
        return false;
    }

edited Jan 12, 2015 at 19:33

answered Jan 12, 2015 at 19:16

Inanda Menezes

1,80414 silver badges17 bronze badges

Comments

Logic1 · Accepted Answer · 2015-01-12 19:35:41Z

0

How about this:

<HTML>
 <head>
  <script>
   function makeArray(id) {
       var x = document.getElementById(id);
       var arr = [];
       for (var i = 0; i < x.length; i++) {
           arr.push(x.options[i].value);
       }
       return arr;
   }
   function isthere(id) {
    var arr = makeArray(id);
    var c = arr.indexOf("b");
    alert ("c is " + c);
   }
  </script>
 </head>
 <BODY onload="isthere('sid');">
  <select id = "sid">
  <option>a</option>
  <option>b</option>
  </select>
 </body>
</html>

edited Jan 12, 2015 at 19:35

answered Jan 12, 2015 at 19:21

Logic1

1,8773 gold badges27 silver badges48 bronze badges

Comments

SergioGeeK7 · Accepted Answer · 2015-01-12 19:40:18Z

0

when you x.text.indexOf("a"); are refence to de array <option>. no the text of the element. ... you can also ...

var x = document.getElementById(id).options;

  for (j = 0; j<= 1; j++) {
   if (x[j].text.indexOf("a"){
       alert("it is a");
   }
}

or var x = document.getElementById(id).options;

  x.forEach(function (element) {
        if (element.text.indexOf("a")){
            alert("it is a");
        }
  });

you can use == instead .indexOf LIKE that

if (element.text == "a")){
            alert("it is a");
}

answered Jan 12, 2015 at 19:40

SergioGeeK7

711 silver badge3 bronze badges

Comments

Lkraljevic · Accepted Answer · 2015-01-12 19:40:52Z

0

If you are trying to display text of selected option you can use this:

function isthere(id) {
  var x = document.getElementById(id).options;
 var c = x[x.selectedIndex].text
 alert ("c is " + c);
 }

indexOf is used to find index in array and since x is HTMLOptionsCollection you cannot use indexOf

answered Jan 12, 2015 at 19:40

Lkraljevic

644 bronze badges

Collectives™ on Stack Overflow

javascript how to use index of not with select array

6 Answers 6

11 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

11 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related