Select 下拉菜單值或文本使用 Javascript

Question

我正在嘗試獲取下拉列表的值並將其存儲在使用 Javascript 的變量中。 我搜索了幾篇文章，大部分都找到了 JQuery 方法（對我不起作用的方法，我可能執行不正確），但我更喜歡使用純 Javascript 方法。

解決方案審查： 使用 JavaScript 在下拉列表中獲取選定的值此解決方案使用<option> HTML 標簽作為我使用<div>標簽的地方。

我還實現了一個 JQuery function 允許下拉列表中的選定值替換按鈕文本，這是否會干擾我實現獲取該值的功能的能力？

我似乎正在尋找的所有解決方案都包含option標簽。

JS：

let valueElement = document.querySelector(".dropdown-menu");
let strUsers = valueElement.option[valueElement.selectedIndex].text;
console.log(`User Selected: ${strUsers}`)

我可能不應該使用.option

HTML：

      <div class="btn-group">
        <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          User
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <a class="dropdown-item" href="#" data-value="Admin-0">Admin-0</a>
          <a class="dropdown-item" href="#" data-value="Admin-1">Admin-1</a>
          <a class="dropdown-item" href="#" data-value="Admin-2">Admin-2</a>
        </div>
      </div>

Answer 1

如果您創建自定義 select 下拉菜單，則不能使用selectIndex屬性，因為selectIndex僅在<select>元素上可用，options 屬性也僅在<select>上可用

https://www.w3schools.com/jsref/prop_select_selectedindex.asp

您需要做一些不同的事情，您可以 append 在下拉列表中的<a>上放置一個事件偵聽器，並放置一個 class 告訴您用戶 select

我希望它有幫助