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

我希望它有帮助