javascript click a value in dropdown list

Question

I have the following code written in HTML:

    <table cellspacing="0" cellpadding="0" width="100%" class="HeaderTable">
    <tbody><tr>
        <td id="dnn_ctr6707_TimeTableView_TdClassesList" class="HeaderClassesCell">
            class
            <select name="dnn$ctr6707$TimeTableView$ClassesList" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;dnn$ctr6707$TimeTableView$ClassesList\&#39;,\&#39;\&#39;)&#39;, 0)" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses">
            <option selected="selected" value="14">a</option>
            <option value="15">b</option>
            <option value="16">c</option>
            <option value="17">d</option>
            <option value="49">e</option>
            <option value="60">f</option>
        </select></td>

What i'm trying to do, is programmly click the option 'b' In the console tab. for some reason it doesn't work for me altho it seems good I think.

Here's what I tried:

var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList') // this part work
var y = x.options[1].click() // I managed to get the text of the option but I want it to perform click and it doesn't work that way :(

Thank you for your help!

Answer 1

I think what you want to do is set the value of the select instead of clicking on the option.

Try this instead:

document.getElementById('dnn_ctr6707_TimeTableView_ClassesList').value = "15"

Answer 2

I think what your asking is for an event to be activated. Javascript doesnt have a .click() function i believe.

var x = document.getElementById('dnn_ctr6707_TimeTableView_ClassesList');
var evt = new Event('click');
x.options[1].dispatchEvent(evt);

Answer 3

Here is some simple code that lets you enter an index into a text field and the pick that index from the <select> element.

 var btn = document.querySelector('#select'); var inp = document.querySelector('#inp'); var sel = document.querySelector('#dnn_ctr6707_TimeTableView_ClassesList'); btn.addEventListener('click', function() { var val = parseInt(inp.value, 10); sel.selectedIndex = val; }); 

 class <select name="dnn$ctr6707$TimeTableView$ClassesList" id="dnn_ctr6707_TimeTableView_ClassesList" class="HeaderClasses"> <option selected="selected" value="14">a</option> <option value="15">b</option> <option value="16">c</option> <option value="17">d</option> <option value="49">e</option> <option value="60">f</option> </select> <hr/> <input id="inp" type="text" value="0"/> <button id="select">Select</button>