Jquery 点击<li>下拉选项</li>

Question

This is my code from WHMCS Client Area Dashboard.

<ul class="dropdown-menu" role="menu">
    <li><a href="#"><span data-value="all">All Entries</span></a></li>
    <li><a href="#"><span data-value="Terminated">Terminated</span></a></li>
    <li><a href="#"><span data-value="Cancelled">Cancelled</span></a></li>
    <li><a href="#"><span data-value="Active">Active</span></a></li>
</ul>

I want to click "Active" option by default.

After several tries, I figured out below code can work for me

$('.dropdown-menu li:nth-child(4) a').click();

But the issue is, Active tab is not fixed at 4th position.

Want to change the below code so it actually use "Active" value instead of 4th option.

$('.dropdown-menu li:nth-child(4) a').click();

I am learning Jquery, already tried searching many threads. Couldn't find one. Need help.

Answer 1

You can use data attribute for selector $('.dropdown-menu span[data-value="Active"]') .