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? — Anirudh Mangalvedhekar
– Anirudh Mangalvedhekar, Commented Nov 30, 2018 at 19:47
@Thefourthbird Thanks it works also, but I found pew007 answer to be shorter :) — Z.Zadon
– Z.Zadon, Commented Nov 30, 2018 at 20:00

pew007 · Accepted Answer · 2018-11-30 19:52:22Z

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, 2018 at 19:52

pew007

5032 gold badges8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Z.Zadon Over a year ago

Thanks!, Shortest answer I saw :)

pew007 Over a year ago

@Z.Zadon Glad to help

Valentino Over a year ago

@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?

Intervalia · Accepted Answer · 2018-11-30 19:54:41Z

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>

Martin Bradley · Accepted Answer · 2018-11-30 19:48:02Z

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, 2018 at 19:48

Martin Bradley

693 bronze badges

1 Comment

Tms91 Over a year ago

Well yes, Javascript does indeed have a click(). function, take a look here w3schools.com/jsref/met_html_click.asp

Collectives™ on Stack Overflow

javascript click a value in dropdown list

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related