使用Javascript选择下拉菜单值或文本

Question

我试图获取下拉列表的值，并使用Javascript将其存储在变量中。我已经搜索了几篇文章，并且大多数都找到了JQuery方法(那些方法对我来说不管用，我可能不正确地实现它们)，但是我更喜欢使用纯Javascript方法。

解决方案回顾：Get selected value in dropdown list using JavaScript此解决方案使用<option> HTML标记作为我使用<div>标记的位置。

我还实现了一个JQuery函数，该函数允许下拉列表中选定的值替换按钮文本，这是否与我实现获取该值的功能相关联？

我似乎正在寻找的所有解决方案都包含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

如果创建自定义的选择下拉列表，则不能使用selectIndex属性，因为selectIndex仅在<select>元素上可用，而options属性仅在<select>上可用。

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

您需要做一些不同的事情，您可以在您的下拉列表中在<a>上附加一个事件侦听器，并放置一个类来告诉您用户是否选择

我希望它能帮上忙