CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapwebsocket
Philipp Fu
Philipp Fu

Reputation: 75

How to get an value from a bootstrap dropdown menu (jQuery)

I'm setting up a webserver and I want to send the selected values from bootstrap dropdown menus peer websocket.

I'm already tried to set an value for the selected items with data-value="some value" and value="some value". And try to get them with an jQuery.

<div class="dropdown">
    <button class="btn dropdown-toggle config_btn" type="button" data-toggle="dropdown" id="btn_baud">
        <span class="caret"></span></button>
    <u1 class="dropdown-menu" id="baudrate">
        <li><a href="#">250 kBit/s</a></li>
        <li><a href="#">500 kBit/s</a></li>
        <li><a href="#">1 MBit/s</a></li>
    </u1>
</div>

Show the selected value in the Dropdown menu button:

$(document).ready(function(){
    $("#baudrate a").click(function(){
        $("#btn_baud").text($(this).text());
    });
});

Get the selected text from the Dropdown menu:

$(document).ready(function() {
    $("#baudrate li a").click(function() {
        baudrate = $(this).html();
    });
});

I'm able to get the selected text from the Dropdown menu but I can't get an value.

When I try to set an value like:

<li data-value="250"><a href="#">250 kBit/s</a></li>
<li><a data-value="250" href="#">250 kBit/s</a></li>

I can't get it with .value() in my jQuery.

Upvotes: 1

Views: 3743

Answers (2)

Aksen P
Aksen P

Reputation: 4599

HTML:

<div class="dropdown">
    <button class="btn dropdown-toggle config_btn" type="button" data-toggle="dropdown" id="btn_baud">
        <span class="caret"></span></button>
    <u1 class="dropdown-menu" id="baudrate">
        <li><input type="hidden" value="250"/><a href="#">250 kBit/s</a></li>
        <li><input type="hidden" value="500"/><a href="#">500 kBit/s</a></li>
        <li><input type="hidden" value="1"/><a href="#">1 MBit/s</a></li>
    </u1>
</div>

JS:

<script>
    $(document).ready(function(){
         $("#baudrate li a").click(function() {
            baudrate = $(this).parent().find('input').val();
            alert(baudrate);
        });
    });
</script>

Upvotes: 1

m ba
m ba

Reputation: 134

Its not value its data.

https://api.jquery.com/data/

$(element).data('value');

Upvotes: 3

Related Questions