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!

Possible duplicate of [How do I programmatically set the value of a select box element using JavaScript?](https://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript) — Anirudh Mangalvedhekar, Nov 30 '18 at 19:47
@Thefourthbird Thanks it works also, but I found pew007 answer to be shorter :) — Z.Zadon, Nov 30 '18 at 20:00

score 7 · Accepted Answer · answered Nov 30 '18 at 19:52

7

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"

answered Nov 30 '18 at 19:52

pew007

453
2
7
17

Thanks!, Shortest answer I saw :) – Z.Zadon Nov 30 '18 at 19:59
@Z.Zadon Glad to help – pew007 Nov 30 '18 at 21:19
1

@pew007 this changes the select value fine but when submitting form it does not validate the field as correct. Seems it detects the element has not really been changed and some event is missing. Any ideas how to solve that? – Valentino Aug 26 '21 at 17:12

score 3 · Answer 2 · answered Nov 30 '18 at 19:54

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>

score 2 · Answer 3 · answered Nov 30 '18 at 19:48

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);

answered Nov 30 '18 at 19:48

Martin Bradley

69
3

1

Well yes, Javascript does indeed have a `click().` function, take a look here w3schools.com/jsref/met_html_click.asp – Tms91 Mar 31 '22 at 12:28

javascript click a value in dropdown list

3 Answers3

Linked