如何从选定的 li 中获取值？

Posted

技术标签:

【中文标题】如何从选定的 li 中获取值？【英文标题】：How to get the value from a selected li? 【发布时间】：2018-02-28 23:23:48 【问题描述】：

我从 CodePen 复制了一个水平选择菜单，这里是 source code

结果如下：

var btn = document.querySelector("button")
var dropdown = document.querySelector(".dropdown-options")
var optionLinks = document.querySelectorAll(".option a")
console.log(optionLinks)

btn.addEventListener("click", function(e) 
  e.preventDefault()
  console.log("btn")
  dropdown.classList.toggle("open")
);

var clickFn = function(e) 
  e.preventDefault()
  dropdown.classList.remove("open")
  btn.innerhtml = this.text
  var activeLink = document.querySelector(".option .active")

  if (activeLink) 
    activeLink.classList.remove("active")
  
  this.classList.add("active")

for (var i = 0; i < optionLinks.length; i++) 
  optionLinks[i].addEventListener("mousedown", clickFn, false)

.container 
  max-width: 500px;
  margin-top: 10px;
  margin-left: 0px;

.container button 
  position: relative;
  background: none;
  border: none;
  outline: none;
  font-size: 16px;
  border-bottom: 2px solid #9b9b9b;
  padding-bottom: 8px;
  min-width: 150px;
  text-align: left;
  outline: none;
  cursor: pointer;
  z-index: 2;

.container button:after 
  content: '▾';
  position: absolute;
  right: 0px;
  top: 0%;
  color: rgb(142, 142, 142);

.container .dropdown 
  position: relative;

.container .dropdown .dropdown-options 
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: scale(0.8) translate3d(-20px, 0px, 0);
          transform: scale(0.8) translate3d(-20px, 0px, 0);
  -webkit-transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  z-index: 1;

.container .dropdown .dropdown-options.open 
  opacity: 1;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
  z-index: 5;

.container .dropdown .dropdown-options li 
  display: inline-block;

.container .dropdown .dropdown-options li a 
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
  color: #2975DA;

.container .dropdown .dropdown-options li a:hover 
  color: #2269c7;

.container .dropdown .dropdown-options li a.active 
  border-bottom: 2px solid #9b9b9b;
  color: #9b9b9b;

.container .dropdown .dropdown-options li a.active:hover 
  color: #9b9b9b;

<div class="container">
  <div class="dropdown">
    <button>Type</button>
    <ul class="dropdown-options">
      <li class="option">
        <a href="#">A</a>
      </li>
      <li class="option">
        <a href="#">B</a>
      </li>
      <li class="option">
        <a href="#">C</a>
      </li>
      <li class="option">
        <a href="#">D</a>
      </li>
    </ul>
  </div>
</div>

在提交此表单之前，我不知道如何获取selected li。这不是&lt;select&gt;，我在表单中使用此菜单，有没有一种简单的方法可以使用javascript 获取li 的选定值？

【问题讨论】：

你是“a”键卡住还是什么？ 代码是一个菜单而不是一个下拉菜单，并且在这个网站上有一个确切的答案，你应该刚刚搜索而不那么懒惰。 How to get the innerHTML of selectable jquery element?的可能重复 【参考方案1】：

这里有一个解决方案https://jsfiddle.net/9Lk8vwvL/

var btn = document.querySelector("button")
var dropdown = document.querySelector(".dropdown-options")
var optionLinks = document.querySelectorAll(".option a")

btn.addEventListener("click", function(e) 
  e.preventDefault()
  dropdown.classList.toggle("open")
);

var clickFn = function(e) 
  console.log(e.target.innerText);
  e.preventDefault()
  dropdown.classList.remove("open")
  btn.innerHTML = this.text
  var activeLink = document.querySelector(".option .active")

  if (activeLink) 
    activeLink.classList.remove("active")
  
  this.classList.add("active")

for (var i = 0; i < optionLinks.length; i++) 
  optionLinks[i].addEventListener("mousedown", clickFn, false)

.container 
  max-width: 500px;
  margin-top: 10px;
  margin-left: 0px;

.container button 
  position: relative;
  background: none;
  border: none;
  outline: none;
  font-size: 16px;
  border-bottom: 2px solid #9b9b9b;
  padding-bottom: 8px;
  min-width: 150px;
  text-align: left;
  outline: none;
  cursor: pointer;
  z-index: 2;

.container button:after 
  content: '▾';
  position: absolute;
  right: 0px;
  top: 0%;
  color: rgb(142, 142, 142);

.container .dropdown 
  position: relative;

.container .dropdown .dropdown-options 
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: scale(0.8) translate3d(-20px, 0px, 0);
          transform: scale(0.8) translate3d(-20px, 0px, 0);
  -webkit-transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  z-index: 1;

.container .dropdown .dropdown-options.open 
  opacity: 1;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
  z-index: 5;

.container .dropdown .dropdown-options li 
  display: inline-block;

.container .dropdown .dropdown-options li a 
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
  color: #2975DA;

.container .dropdown .dropdown-options li a:hover 
  color: #2269c7;

.container .dropdown .dropdown-options li a.active 
  border-bottom: 2px solid #9b9b9b;
  color: #9b9b9b;

.container .dropdown .dropdown-options li a.active:hover 
  color: #9b9b9b;

<div class="container">
  <div class="dropdown">
    <button>Type</button>
    <ul class="dropdown-options">
      <li class="option">
        <a href="#">A</a>
      </li>
      <li class="option">
        <a href="#">B</a>
      </li>
      <li class="option">
        <a href="#">C</a>
      </li>
      <li class="option">
        <a href="#">D</a>
      </li>
    </ul>
  </div>
</div>

由于你在clickFn方法中有事件，你可以使用console.log(e.target.innerText);

希望这将帮助您获得选定的li 值。

【讨论】：

【参考方案2】：

在您的 clickFn 函数中，您已经将所选链接设置为 button innerHTML - btn.innerHTML = this.text;

button 的默认文本是 Type。您可以在表单提交期间检查按钮文本，例如：

if (btn.innerText === "Type")
   //Option not selected - Alert user
else
   //Option selected - Validate other fields

【讨论】：

以上是关于如何从选定的 li 中获取值？的主要内容，如果未能解决你的问题，请参考以下文章

如何从选定的下拉列表中获取另一个值

如何从 GridPanel 的选定行中获取值？ [外网]

如何从 Controller MVC 中获取选定的下拉值

如何使用angularJS从自定义下拉列表中获取选定的值

如何从选定行的网格面板中仅获取特定值

如何从黑莓10级联中的复选框选定项目中获取值..？