Getting dropdown active text after selection

[vinc112]

Hi, 

I have a dropdown menu with the following html. 

<div class="cmp-dropdown cmp-form-options__field cmp-form-options__field--checkbox" name="persona" id="form-options-abc">
<button id="persona-dropdown" class="cmp-dropdown__button show">lunch</button>

<div id="form-options-abc" class="dropdown-text">
<ul>
<li data-value="bft" class="">breakfast</li>
<li data-value="lunch" class="">lunch</li>
<li data-value="tea" class="active">tea</li>
<li data-value="dinner">dinner</li>
</ul>
</div>

I've used click to identify the interaction : .cmp-dropdown__button

and also tried using .dropdown-text ul li.active to test.

The issue is the text fires when i click on the dropdown but not on the selected text in the dropdown.

Can you please advise?

Thanks.

[kautuk_sahni]

@dwright-adobe@Michael_Soprano@nnakirikanti@gkalyan@Anuhya-Y@supratim320

Kindly take a moment to review this question and share your valuable insights. Your expertise would be greatly appreciated!

[nnakirikanti · Accepted solution]

@vinc112 Looks like this is not traditional form select, your UI team would implemented a custom select widget for your web.

Please check this thread which will help and custom snippet which provides you a direction of adding "click" event on your individual of "li"  and check for "active" in your case. 

https://andrejgajdos.com/custom-select-dropdown/

~cheers,

NN