How to get value of selected dropdown value on button click in jquery

Question

I am using Bootstrap with jquery to create a dynamic table consisting dropdown menu and button. I want to get value of dropdown menu selected in jquery on button click.

Below is my code

<table class="table table-bordered">
  <tbody>
  {% for item in items %}
    <tr>
      <td>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select
          </button>
          <ul class="dropdown-menu" role="menu" id="options" onchange="selectFromDropDown(this.value)">
            <li><a id="weekly" selected>Option 1</a></li>
            <li><a id="biweekly">Option 2</a></li>
            <li><a id="monthly">Option 3</a></li>
          </ul>
        </div>
      </td>
      <td>
        <form data-toggle="validator" role="form" >
          <input type="submit" value="Update" class="btn btn-xs btn-block" id="update">
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

And below is the jquery

$('#update').click(function(){
  alert($('#options option:selected').html())
});

When I run above code it returns "undefined".

Solution

If you are using select from control then no worry to code for it. Just do a little change in your code.

$('#update').click(function(){
  alert($('#options').val());
});

Or if you are using ul, li then change your jquery code like this.

$('#update').click(function(){
  alert($('#options .selected').text())
});

Comments

[Sukanya Purushothaman]

You are using list instead of <select>. You should use your script like this. $("#options .selected").text()

[Jack Bashford]

Maybe make it a <select> rather than a <ul>?

[Jack Bashford]

Possible duplicate of jQuery Get Selected Option From Dropdown

[Haidangdevhaui]

try $('#options').find('a[selected]').html()