如何在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 from control，那么不用擔心為它編碼。 只需對您的代碼進行一些更改。

$('#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）。

然后我使用 CSS selected [selected]這是屬性選擇器； 結合find （搜索選擇器的子項），它應該可以工作。

---

說了這么多，沒有辦法通過單擊下拉菜單來更改所選屬性 - 除非您使用 JavaScript - 因為只有options使用所選屬性。

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

上面的代碼是一種解決方法，可以讓您的下拉菜單與我上面的代碼一起正常工作。
實際上，它所做的就是從所有#option a元素中刪除 selected 屬性，然后將其提供給被單擊#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來做到這一點。

此外，如果您有很多行，您也應該考慮使用事件委托，這樣附加的偵聽器就會更少。 我用過這個解決方案。

現在，由於下拉菜單不是真正的select ，它不會響應change事件，因此我也使用委托提供了自己的選擇功能。 由於它是一個錨點，您不能使用:selected偽: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>