Get value of dropdown bootstrap onclick Jquery function

Question

I have a table in my HTML file and in one of the columns I have a button component from bootstrap, when the button is clicked a drop down appears with three options - 'medium', 'low', 'servicerequest'. When this item is clicked, I am trying to get the value of the item clicked.

$(".table table-hover table-condensed").on('click', '.dropdown-menu', function(e) {
  var id = $(this).attr('#mediumpriority');
  alert(id);
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
High
</button>
          <div class="dropdown-menu">
            <a id="mediumpriority" class="dropdown-item">Medium</a>
            <a class="dropdown-item">Low</a>
            <a class="dropdown-item">Service Request</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

When I click on 'High' button, I get a drop down of three options, if i click on 'Medium' I expect an alert to show the the 'Medium' value:

<a id="mediumpriority" class="dropdown-item">Medium</a>

Can someone point out why I am not getting this alert when I run and click on the priority 'medium' ?

`#mediumpriority` is not an attribute. – Celestine Feb 22 '18 at 18:31 — Celestine, Feb 22 '18 at 18:31

Vinit Sarvade · Accepted Answer · 2018-02-22T18:35:01.833

1

To jQuery selector looks incorrect. It should be

$(".table.table-hover.table-condensed").on('click', '.dropdown-item', function(e) { 
    var menu = $(this).html();
    alert(menu);
});

edited Feb 22 '18 at 18:35

answered Feb 22 '18 at 18:32

Vinit Sarvade

750
6
14

this did not work: I got 'undefined' – RA19 Feb 22 '18 at 18:34
I've just updated my answer. – Vinit Sarvade Feb 22 '18 at 18:35

Ele · Answer 2 · 2018-02-22T18:38:01.667

This selector is wrong:

$(".table table-hover table-condensed")
          ^           ^

Use this: .table.table-hover.table-condensed

To get the attr id use this: $(this).attr('id')

The event delegation call is using the wrong selector for children

$(".table table-hover table-condensed").on('click', '.dropdown-menu', function(e) {
                                                     ^

Use this instead: .dropdown-item

$(".table.table-hover.table-condensed").on('click', '.dropdown-item', function(e) {
  var text = $(this).text();
  alert(text);
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
High
</button>
          <div class="dropdown-menu">
            <a id="mediumpriority" class="dropdown-item">Medium</a>
            <a class="dropdown-item">Low</a>
            <a class="dropdown-item">Service Request</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

That was close to what I wanted, but the id outputed 'mediumpriority' whereas I was after 'Medium'. It has been answered below. — RA19, Feb 22 '18 at 18:36
@RA19 umm do you want the HTML. I recommend you .text() to avoid problems with HTML tags. Answer updated! — Ele, Feb 22 '18 at 18:39

Get value of dropdown bootstrap onclick Jquery function

2 Answers2