Select option from selectbox

Question

How can I select an option with javascript (/console in google chrome)? This is a part of the html code:

<nobr>
    Element<br>
    <span class="absatz">
     &nbsp;<br>
    </span>
    <select name="element" class="selectbox" style="width:114" size="12" onchange="doDisplayTimetable(NavBar, topDir);">
        <option value="0">- All -</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">X</option>
        <option value="4">C</option>
        <option value="5">D</option>
        <option value="6">E</option>
        <option value="7">F</option>
        <option value="8">G</option>
        <option value="9">H</option>
        <option value="10">I</option>
        <option value="11">J</option>
        <option value="12">K</option>
        <option value="13">L</option>
        <option value="14">M</option>
        <option value="15">N</option>
        <option value="16">O</option>
        <option value="17">P</option>
        <option value="18">Q</option>
        <option value="19">R</option>
    </select>
</nobr>

Or http://pastebin.com/JSaKg4HB

I already tried this:

document.getElementsByName("element")[0].value = 1;

But it gives me this error:

Uncaught TypeError: Cannot set property 'value' of undefined at :2:48 at Object.InjectedScript._evaluateOn (:875:140) at Object.InjectedScript._evaluateAndWrap (:808:34) at Object.InjectedScript.evaluate (:664:21)

EDIT: I I tried it but it don't works on for the full website. Maybe because there is another html tag inside the first html tag(if I download the website, there is another html file called welcome.html where the selectbox is.) I thinks it's in an iFrame, because chrome gives me the Option "show Frame".

EDIT 2: I can access the frame where the selectbox is but I still won't find the selectbox. Here is the code of the frame(not the full code): pastebin.com/iVUeDbYV

Just typed your question on google :) http://stackoverflow.com/questions/10911526/how-to-change-html-selected-option-using-javascript — Walfrat, Feb 11 '16 at 15:21
Your code is working here https://jsfiddle.net/vj5opu2f/1/. The only thing that fiddle has that you might not is that it runs the JavaScript _after_ [the DOM is loaded](http://stackoverflow.com/questions/7992342/run-javascript-function-when-the-dom-is-ready). — Hanlet Escaño, Feb 11 '16 at 15:29

score 1 · Accepted Answer · answered Feb 11 '16 at 15:22

1

Try this:

document.querySelectorAll('[name="element"]')[0].value;

Although it is very weird that getElementsByName is not working for you. Are you sure the element is in the same document, and not in an iFrame?

answered Feb 11 '16 at 15:22

Poul Kruijt

69,713
12
145
149

I I tried it but it don't works on for the full website. Maybe because there is an html tag inside the html tag(if I download the website, there is another html file called welcome.html where the selectbox is.) I thinks it's in an iFrame. – AlGrande Feb 11 '16 at 15:40
1

Well, there must be an `iframe`, because having a html tag inside another one is..... horrible :). If the extra document in the iframe is loaded from the same location you can use: `document.getElementById('iframe').contentWindow.document.getElementsByName("element")[0]` – Poul Kruijt Feb 11 '16 at 15:44
Thank you! I can access the frame with it but it still won't find the selectbox. Here is the code of the frame(not the full code): http://pastebin.com/iVUeDbYV – AlGrande Feb 12 '16 at 14:48
Okay I made it using this: document.getElementById('blockrandom').contentWindow.document.getElementsByTagName('frame')[1] Thank you! – AlGrande Feb 13 '16 at 14:30

score 0 · Answer 2 · answered Feb 11 '16 at 15:25

The simple answer:

document.getElementById("select_element").selectedIndex = "option index";

Where option index is the index of the option in the dropdown that you'd like to activate.

You can get the index of an option by using this:

var selected = document.querySelector( '#'+div+' > option[value="'+val+'"]' );

Where div is the ID of the <select> tag.

how this helps!

Mitch Conner · Answer 3 · 2016-02-11T16:10:38.857

This will do what you want.

document.querySelector('[name="element"]').value = 4 // The value you want to select

and this will retrieve the value

var value = document.querySelector('[name="element"]').value; // 4

this explains what's going on

var option = document.querySelector('[name="element"]');//option element
    option.value; // 4
    option.selectedIndex; // 4
    option.selectedOptions; // [<option value="4">C</option>]
    option.selectedOptions[0].innerText; // C
    option.selectedOptions[0].value; // 4

Remember that selectedOptions is an array because more than one option may be selected, in those cases, you will have to loop through the array to get each value. As per Hanlet Escaño's comment, make sure your code is set to execute after the DOM has loaded.

window.onload = function() {  
    document.querySelector('[name="element"]').value = 0; // sets a default value   
}

Select option from selectbox

3 Answers3