Unable to programatticaly click item in drop down menu

Question

I am trying to create a simple script for tampermonkey which when triggered through a keyboard shortcut, it will programmatically click/select a specific font size in a dropdown menu. The menu opens up when I click a specific button in a forum panel, and it lists all the available file font sizes.

the menu looks like this: dropdown menu

Chrome's inspector gives this html format of the opened menu: html format

They are a lot of topics here which address this subject, how to click a dropdown item, and I have tried almost all the methods, both with javascript and jquery but nothing works.

I have only managed to programmatically click and open the button which opens the dropdown menu with this code:

document.getElementById('cke_12').click();

After I open the dropdown, I trigger the code which is supposed to select/click the specific font size. I have tried these codes:

document.getElementById('cke_70').click();
document.querySelector('cke_70').click();
document.getElementById('cke_panel_list').selectedIndex = "8"
document.getElementById("cke_panel_list").value = "8";
document.querySelector('cke_panel_list').value = '8'
$('cke_70')[0].click();
$('cke_70').click();
$("li#cke_70").trigger("click");
$("ul li:first").trigger("click");
$('cke_panel_list li:eq(8)').trigger("click");
$('cke_panel_list').find('li').eq(8).click();
$('cke_panel_list').val('8').trigger('change');
$('cke_panel_list').val('8').trigger('click');
$('cke_panel_list').prop('selectedIndex', 8);

I have also tried with cke_70_option as id. But no item is selected/clicked, the dropdown menu is left opened as it is.

Any idea what I am doing wrong?

You probably need to wait after the first click. See the duplicate question. — Brock Adams, Apr 07 '19 at 03:31

Yoko Ishioka · Answer 1 · 2019-04-08T01:24:19.190

0

$(".cke_panel_list").click(function(){
    return $(this).val();
});

This is jQuery to select all elements that have a class of cke_panel_list. Returning the value will give you the value that element has.

edited Apr 08 '19 at 01:24

answered Apr 07 '19 at 02:29

Yoko Ishioka

161
5

While this code may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – Pika Supports Ukraine Apr 07 '19 at 04:31

score 0 · Answer 2 · edited Apr 07 '19 at 03:16

0

you can to use this:

$(document).on("click", ".cke_panel_list", function(){
    return $(this).val();
 });

edited Apr 07 '19 at 03:16

Aniket G

3,471
1
13
39

answered Apr 07 '19 at 02:49

Mateus Gonçalves

676
5
16

Unable to programatticaly click item in drop down menu

2 Answers2