CODEWITHSUNDEEP
javascripthtmlselect
AlGrande
AlGrande

Reputation: 187

Select option from selectbox

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

Upvotes: 2

Views: 311

Answers (3)

Mitch Conner
Mitch Conner

Reputation: 26

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   
}

Upvotes: 0

Derek Pollard
Derek Pollard

Reputation: 7165

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!

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71971

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?

Upvotes: 1

Related Questions