Using JQuery, How can I read the data-option value when an option is clicked/selected from List.

<span data-name="" data-select="dropdown" class="btn-group dropdown dropdown-select">
    <a data-target="#" data-toggle="dropdown" class="btn dropdown-toggle">Select User</a>
    <a data-target="#" data-toggle="dropdown" class="btn dropdown-toggle end"><i class="icon-arrow-down"></i></a>
    <ul class="dropdown-menu">        
        <li class="active"><a data-option="1D" href="#">One Day</a></li>
        <li class=""><a data-option="1W" href="#">One Week</a></li>
        <li class=""><a data-option="2W" href="#">Two Weeks</a></li>

     </ul>
</span>

Using JQuery, How can I read the data-option value when an option is clicked/selected from List.

<span data-name="" data-select="dropdown" class="btn-group dropdown dropdown-select">
    <a data-target="#" data-toggle="dropdown" class="btn dropdown-toggle">Select User</a>
    <a data-target="#" data-toggle="dropdown" class="btn dropdown-toggle end"><i class="icon-arrow-down"></i></a>
    <ul class="dropdown-menu">        
        <li class="active"><a data-option="1D" href="#">One Day</a></li>
        <li class=""><a data-option="1W" href="#">One Week</a></li>
        <li class=""><a data-option="2W" href="#">Two Weeks</a></li>

     </ul>
</span>

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow asked Jul 24, 2013 at 16:53 Ritesh Kumar GuptaRitesh Kumar Gupta 5,19177 gold badges5151 silver badges7171 bronze badges 4

• 1 Are you using bootstrap? – David Hellsing Commented Jul 24, 2013 at 16:59
• the question is tagged twitter-bootstrap, you can assume he does ;) – Pascamel Commented Jul 24, 2013 at 17:03
• @Pascamel It wasn't originally. – thatidiotguy Commented Jul 24, 2013 at 17:04
• @thatidiotguy my bad ;) i opened the question right between your question and david's questionm sorry for that guys! – Pascamel Commented Jul 24, 2013 at 17:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

$("ul.dropdown-menu a").click(function(){
    alert($(this).data("option"));
});

Try this on

$("ul.dropdown-menu a").on("click",function(){
     alert($(this).data("option"));
});

As click is not working when element added after dom is loaded.

You can do

<li class="active"><a data-option="1D" href="#" onclick="getDataOption(this);">One Day</a></li>

var getDataOption = function (node) {
    var value = node.getAttribute("data-option");
    console.log(value);
    return value;
};

$("ul.dropdown-menu li").click(function(){

   alert($(this).attr("data-option"));
});