CODEWITHSUNDEEP
javascriptjquery
user5396759
user5396759

Reputation: 51

javascript - how to obtain span text values within a dropdown menu

I'm trying to implement a click event listener for a drop-down menu. So far I'm not having much luck trying to drill down into the values within it. Here is the html I'm working with:

<div class="dropdown" data-id="123">
    <div class="arrow">▼</div>
        <span class="value">uk</span>
            <div class="select" tabindex="0" style="display: none; width: 134px;">
                <span data-id="781" class="selected">uk</span>
                <span data-id="782" class>usa</span>
                <span data-id="783">china</span>
                <span data-id="784">africa</span>
            </div>
</div>

If I click on the option 'africa' within the drop-down I'd like an alert to display 'africa'. So far I have this, but would appreciate more opinions on how I can achieve this:

jQuery('dropdown select').on('mousedown',function(){ alert(jQuery(this).text()); })

Thank you.

Upvotes: 1

Views: 40

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

You can put click event on $(".select span")

$(".select span").on("click",function(){
  alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" data-id="123">
    <div class="arrow">▼</div>
        <span class="value">uk</span>
            <div class="select">
                <span data-id="781" class="selected">uk</span>
                <span data-id="782" class>usa</span>
                <span data-id="783">china</span>
                <span data-id="784">africa</span>
            </div>
</div>

You forgot to add dot . before class here, also need to add span to track each span 

jQuery('.dropdown .select span').on('mousedown',function(){ alert(jQuery(this).text()); })

Upvotes: 1

Related Questions