Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 11-Aug-22 23:52pm

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[^].
 
Share this answer
 
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)
 
Share this answer
 
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..
Hello, have you found a solution?
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900