How to get the value from a selected li?

Question

I copied a horizontal selection menu from CodePen, here's the source code

Here's the result:

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>

I have trouble with how to get the selected li before I submit this form. It's not a <select> and I use this menu in a form, is there a easy way to get the selected value of li using JavaScript?

The code is a menu not a drop down and there is an exact answer on this site you should have just searched with out being so lazy. — S4NDM4N, Sep 20 '17 at 03:48
Possible duplicate of [How to get the innerHTML of selectable jquery element?](https://stackoverflow.com/questions/18786050/how-to-get-the-innerhtml-of-selectable-jquery-element) — S4NDM4N, Sep 20 '17 at 03:48

score 1 · Accepted Answer · answered Sep 20 '17 at 04:00

Here you go with a solution 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>

Since you have the event in clickFn method, you can use console.log(e.target.innerText);

Hope this will help you to get the selected li value.

score 1 · Answer 2 · answered Sep 20 '17 at 04:16

In your clickFn function you are already setting the selected link to button innerHTML - btn.innerHTML = this.text;

The default text for button is Type. You can check for button text during form submission like:

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

How to get the value from a selected li?

2 Answers2