javascript - 如何在jquery中单击按钮时获取所选下拉值的值

Question

我正在使用 Bootstrap 和 jquery 创建一个包含下拉菜单和按钮的动态表。 我想在单击按钮时获取在 jquery 中选择的下拉菜单的值。

下面是我的代码

<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>

下面是jquery

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

当我运行上面的代码时，它返回“未定义”。

Answer 1

如果您使用控件中的select，那么无需担心为其编写代码。只需对代码进行一点更改即可。

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

或者，如果您使用 ul, li，则像这样更改您的 jquery 代码。

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