Click on a specific <li> in a dropdown list

I want to click on the

with a value of 250 to selct it. By default the

with a value of 10 is selected. This is how the HTML looks like:

Show 10 25 50 100 250 250

entries

I can “catch” the fourth

with:

let listNumber = document.getElementsByClassName('active-result')[4].innerHTML; console.log(listNumber);

But I cannot click on it to select it: let selected = document.getElementsByClassName('active-result')[4]; selected.click();

Maybe I should rather try and click on the option querySelector with a value of 250?

Marina_S

6 years ago

Level 1

Click on a specific

in a dropdown list

I want to click on the

with a value of 250 to selct it. By default the

with a value of 10 is selected. This is how the HTML looks like:

    id = "AllInventoryList_length" > < label > Show < select name = "AllInventoryList_length"
    aria - controls = "AllInventoryList"
    class = "ready"
    style = "display: none;" > < option value = "10" > 10 < /option><option value="25">25</option > < option value = "50" > 50 < /option><option value="100">100</option > < option value = "250" > 250 < /option></select > < div class = "chosen-container chosen-container-single chosen-container-single-nosearch"
    style = "width: auto;"
    title = "" > < a class = "chosen-single"
    tabindex = "-1" > < span > 250 < /span><div><b></b > < /div></a > < div class = "chosen-drop" > < div class = "chosen-search" > < input type = "text"
    autocomplete = "off"
    readonly = "" > < /div><ul class="chosen-results"><li class="active-result result-selected" style="" data-option-array-index="0">10</li > < li class = "active-result"
    style = ""
    data - option - array - index = "1" > 25 < /li><li class="active-result" style="" data-option-array-index="2">50</li > < li class = "active-result"
    style = ""
    data - option - array - index = "3" > 100 < /li><li class="active-result result-selected" style="" data-option-array-index="4">250</li > < /ul></div > < /div> entries</label > < /div>```

I can “catch” the fourth <li> with:

```let listNumber = document.getElementsByClassName('active-result')[4].innerHTML;
        console.log(listNumber);```

But I cannot click on it to select it:
```let selected = document.getElementsByClassName('active-result')[4];
selected.click();```


Maybe I should rather try and click on the  option querySelector with a value of 250?

MLCochrane

6 years ago

Best Answer

Level 3

Hey Marina,

I'm a little unsure what it is you're exactly you're trying to accomplish, but hopefully this might point you in the right direction.

Your solution for selecting the list item through the HTMLCollection should return the desired element. As you've mentioned that didn't result in what you wanted, my best guess as to your goal is to actually change the selected option in the select dropdown. You should be able to accomplish that with the following:

document.querySelector('select[name="AllInventoryList_length"]').value = '250';

In the future, if you actually want to select a list item and using your method of selecting it based on the HTMLCollection index or querying something like the data-option-array-index attribute aren't options for whatever reasons, you can get the item based on it's contents like so:

const items = document.getElementsByClassName('active-result');
const toBeClicked = Array.from(items).filter(e => e.innerText === '250');
toBeClicked[0].click();

Here we're getting the HTMLCollection as normal via class name, and then using Array.from() to create an array from that array like object. This lets us use Array methods such as filter() to test each element's innerText for the desired value. This returns a new array with any items that passed our test so we still need to select that element within our returned array. In this case our new array just has our single element which we select with toBeClicked[0].click();.

Does this help at all?

Marina_S

6 years ago

Level 1

MLCochrane - thank you SO much for taking the time to write this out so elegantly AND explaining so clearly the steps.

This code is part of a userscript and I am getting the error:

userscript.html?id=065de268-ddf5-41c9-92d4-9bb144893209:32 Uncaught TypeError: Cannot read property 'click' of undefined

The console is considering

toBeClicked.click();

as undefined and I do not undestand why

Please or to participate in this conversation.