I want to simulate a click event on drop down

Question

0.00/5 (No votes)

See more:

, +

when a user click on that the dropdown options are visible to them and a user can select from the available I want to simulate the visibility of options without manual clicking on dropdown element.

HTML code
    <select name="data" id = 'cohort' class="form-control" style = "width:215px; margin-left:20px; margin-bottom:8px ; height:30px" >
    <option value = 0>All</option>
    <option value = 1>Diseases</option>
    <option value = 2>Drugs</option>
    <option value = 3>Procedures</option>
    </select>

What I have tried:

I have tried using

$("#cohort").trigger('open');

document.getElementById('cohort').click()

Posted 14-Dec-20 22:31pm

Shivang Dubey(Shivi)

Updated 11-Aug-22 23:52pm

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 15735126 · Answer 1 · 2022-08-11T23:52:00

Solution 3

Hello, have you found a solution?

Posted 11-Aug-22 23:52pm

Member 15735126

Comments

Richard Deeming 12-Aug-22 5:54am

Your comment certainly isn't a solution to this question!

If you want to ask for more information, click the "Have a Question or Comment?" button under the question and post a comment. Do not post your comment as a "solution" to the question.

InbarBarkai · Answer 2 · 2020-12-14T22:57:00

Solution 2

In the comments section of the following link, it seems depricated:
javascript - How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)? - Stack Overflow[^]

Posted 14-Dec-20 22:57pm

InbarBarkai

Comments

Shivang Dubey(Shivi) 15-Dec-20 6:15am

Thanks for that i have already gone through the link but this is the utmost requirement of the client..

Richard Deeming · Answer 3 · 2020-12-14T22:54:00

Solution 1

You can simulate the click, but it won't cause the drop-down list to open.

JavaScript

const element = document.getElementById("cohort");
const event = new MouseEvent("mousedown");
element.dispatchEvent(event);

MouseEvent() - Web APIs | MDN[^]
EventTarget.dispatchEvent() - Web APIs | MDN[^]
Creating and triggering events - Developer guides | MDN[^]

If you want better programmatic control of the list, you will need to use a custom control instead. For example, Select2[^].

Posted 14-Dec-20 22:54pm

Richard Deeming

Comments

Shivang Dubey(Shivi) 15-Dec-20 6:12am

thanks for the quick response but that's what i want to open a drop down just by voice command..

For example: open cohort dropdown.. like that i want to achieve on my webpage..and that's why i don't want any manual intervention.

Shivang Dubey(Shivi) 15-Dec-20 6:19am

How can i use a select2 for my dropdown...Please guide

Richard Deeming 15-Dec-20 6:22am

The Select2 documentation is pretty comprehensive and easy to follow:
Getting Started | Select2 - The jQuery replacement for select boxes[^]

Shivang Dubey(Shivi) 15-Dec-20 21:28pm

Have applied select2 for my select but this exception is coming when I tried to simulate it....

Uncaught TypeError: Cannot read property 'apply' of undefined
at HTMLSelectElement.<anonymous> (select2.min.js:2)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at S.fn.init.r.fn.select2 (select2.min.js:2)
at SpeechRecognition.recognition.onresult (multilayer:1245)