How to get the option value in javascript

Question

i have this code:

<SELECT onChange="chData(this,this.value)">
<OPTION VALUE="_MIPS-LRSYSCPU">MIPS
<OPTION VALUE="_XXCEC-LRSYSCPU">% CEC
<OPTION VALUE="_nIFL-LRSYSCPU">nIFL
</SELECT>

and I need to take with javascript all the value (not the text) of the option value that I have in the HTML PAGE. The problem is that In know that the value contains the word "-LRSYSCPU", but I don't know the previous part (Example _MIPS). the second problem is that I don't have the ID in the select so how can I take the option value? I have seen that people use this code:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

but I don't have the id so i dont know how to proceed..

I need to create an array with this three values : _MIPS-LRSYSCPU, _XXCEC-LRSYSCPU and _nIFL-LRSYSCPU. Thanks

Possible duplicate of [How to access HTML element without ID?](https://stackoverflow.com/questions/236624/how-to-access-html-element-without-id) — Heretic Monkey, Jun 11 '19 at 13:39
well you are passing in `this`.... Are you not referencing the element with that argument? Can you not add a class or data attribute to the element — epascarello, Jun 11 '19 at 13:43

score 0 · Answer 1 · answered Jun 11 '19 at 13:42

If you are using only single select on the whole page then you can use -

let selectTags = document.getElementsByTagName('select');

then it will return you array of HTMLCollection [select]. Now you can get your select using selectTags[0], which is an object of type HTMLCollection. This object contains childNodes. Iterating over child nodes will give you all options and there values.

score 0 · Accepted Answer · answered Jun 11 '19 at 13:44

To grab all the option values in the page that include the substring "LRSYSCPU" you can use this code:

// Grab all the options in the page
const options = document.querySelectorAll('option');

// `filter` out the options that have the "LRSYSCPU" substring
// in their values
const filtered = [...options].filter(({ value }) => value.includes('-LRSYSCPU'));

// Iterate over those filtered options with `map` and return only
// the values
const values = filtered.map(({ value }) => value);
console.log(values);

<select>
<option value="temp">temp</option>
<option value="_MIPS-LRSYSCPU">MIPS</option>
<option value="_XXCEC-LRSYSCPU">% CEC</option>
<option value="temp2">temp2</option>
<option value="_nIFL-LRSYSCPU">nIFL</option>
</select>

Documentation

It works!!!! Thank youu soo much for the fast answer!! I cannot add the ID so in this way it works perfectly! Thanks again — Dana, Jun 11 '19 at 14:10

score 0 · Answer 3 · answered Jun 11 '19 at 13:49

You can use document.querySelectorAll() to find all options that end with -LRSYSCPU. You can then loop over them and test whether they're selected.

let options = document.querySelector("option[value$=-LRSYSCPU]");
for (let i = 0; i < options.length; i++) {
    if (options[i].selected) {
        value = options[i].value;
        text = options[i].text;
        break;
    }
}

If you use jQuery, it has a selector extension :selected, so you can do this without a loop:

var option = $("option[value$=-LRSYSCPU]:selected");
var value = option.val();
var text = option.text();

How to get the option value in javascript

3 Answers3