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())
});

当我在上面的代码中运行时，它返回“ undefined”。

Answer 1

如果您在控件中使用select，则不必为它编写代码。只需对您的代码做些改动即可。

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

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

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

Answer 2

尝试一下：

$('#update').on('click', function () {
    alert($('#options').find('[selected]').html());
});

首先，我使用了on函数，因为click函数会触发实际点击（IIRC）。

然后，我使用选择的[selected] CSS，即attribute selector；结合find（在子级中搜索选择器），它应该可以工作。

说完所有这些，就无法通过单击下拉菜单上的 selected 属性来更改-除非您使用JavaScript-因为只有options使用selected属性。 / p>

$('#options a').on('click', function () {
    $('#options a').removeAttr('selected');
    $(this).attr('selected', true);
});

上面的代码是一种变通方法，可让您的下拉列表与我的上面的代码正常工作。
实际上，它所做的就是从 all #option a元素中删除所选属性，然后将其提供给被单击的属性。

JSFiddle
_{为了简洁起见，我使用了JSFiddle而不是摘要，因为这个答案已经很长了，并且可以防止重复提问者的代码...}

Answer 3

可能您正在寻找这个。如果是下拉列表

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

如果其无序列表，您可以使用此

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

Answer 4

您的jquery搜索在click事件中不正确。您正在#option标识符内寻找选项标签，并且您的html引用了无序列表标签。根据您的html进行选定元素的搜索

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

Answer 5

首先，您的for循环正在复制元素id。 id属性必须是唯一的，否则任何过滤操作（包括附加侦听器）将仅返回第一个元素，并且您的操作将无效。在示例中，我针对其他选择器。您可以通过在下拉列表“ options”中使用重复项作为value的替代品来使用它，只要您不直接定位它们即可。

然后，由于存在多行，因此您必须找到下拉列表在哪一行中，以便可以获取相应的值。您可以使用closest和find来做到这一点。

此外，如果您有很多行，则也应该考虑使用event delegation，这样可以减少监听器的连接。我已经使用了这种解决方案。

现在，由于下拉列表不是真实的select，因此它不会响应change事件，因此我也使用委托提供了自己的选择功能。由于它是锚，因此无法使用:selected伪选择器，因此必须检查是否存在该属性。

$('table').on('click', '.btn-update', function(evt) {
  $clicked = $(this).closest('tr').find('.dropdown-menu a[selected]')
  console.log($clicked.text())
  // You can get the emulated 'value' too
  console.log($clicked.attr('id'))
  // Cancel the 'button' default action
  evt.preventDefault()
});

$('table').on('click', '.dropdown-menu', function(evt) {
  // Find the 'selected' anchor inside this dropdown and remove the attribute
  $(evt.currentTarget).find('a[selected]').removeAttr('selected')
  // Add the attribute to the clicked one
  $(evt.target).attr('selected', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tbody>
    <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">
            <li><a id="weekly">Option 1</a></li>
            <li><a id="biweekly" selected>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 btn-update" id="update">
        </form>
      </td>
    </tr>
    <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">
            <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 btn-update" id="update">
        </form>
      </td>
    </tr>
  </tbody>
</table>

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

5 个答案: