Custom Select vanilla JS

Question

const selectMenu = document.querySelector('#custom-select'),
      selectionInput = document.querySelector('#input-field'),
      dropdown = document.querySelectorAll('.dropdown'),
      dropdownArray = Array.prototype.slice.call(dropdown,0),
      button = document.querySelector('a[data-toggle="dropdown"]'),
      menu = document.querySelector('.dropdown-menu'),
      arrow = button.querySelector('i.icon-arrow');

// Event callback function:
function clickHandler(evt) {  
  evt.preventDefault();
  menu.classList.toggle('show');
  menu.classList.toggle('hide');
  arrow.classList.toggle('open');
  arrow.classList.toggle('close');
  
  let targ = evt.target;
  if (menu.contains(targ)) {
    selectionInput.value = targ.dataset.optvalue;
  }
}

// 'Click' event registration:
selectMenu.addEventListener('click', clickHandler, false);



// Purely your code below:
Element.prototype.hasClass = function(className) {
  return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

.text-center {
  text-align: center;
}

*,
*:before,
*:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 350px;
  margin: 50px auto;
}
.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.title {
  font: normal 40px/1.4 'Pacifico', sans-serif;
  text-align: center;
  color: #2980B9;
}

.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #2980B9;
  -webkit-box-shadow: 0 1px 0 #409ad5 inset,
                      0 -1px 0 #20638f inset;
  -moz-box-shadow:    0 1px 0 #409ad5 inset, 
                      0 -1px 0 #20638f inset;
  box-shadow:         0 1px 0 #409ad5 inset,
                      0 -1px 0 #20638f inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown .icon-arrow.open {
  -webkit-transform: rotate(-180deg);
  -moz-transform:    rotate(-180deg);
  -ms-transform:     rotate(-180deg);
  transform:         rotate(-180deg);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition:    -moz-transform 0.6s;
  -o-transition:      -o-transform 0.6s;
  transition:         transform 0.6s;
}
.dropdown .icon-arrow.close {
  -webkit-transform: rotate(0);
  -moz-transform:    rotate(0);
  -ms-transform:     rotate(0);
  transform:         rotate(0);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition:    -moz-transform 0.6s;
  -o-transition:      -o-transform 0.6s;
  transition:         transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
  display: block;
  color: #6f6f6f;
  background: #EEE;
  -webkit-box-shadow: 0 1px 0 white inset,
                      0 -1px 0 #d5d5d5 inset;
  -moz-box-shadow:    0 1px 0 white inset,
                      0 -1px 0 #d5d5d5 inset;
  box-shadow:         0 1px 0 white inset,
                      0 -1px 0 #d5d5d5 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.dropdown .show {
  display: block;
  max-height: 9999px;
  -webkit-transform: scaleY(1);
  -moz-transform:    scaleY(1);
  -ms-transform:     scaleY(1);
  transform:         scaleY(1);
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-animation:    showAnimation 0.5s ease-in-out;
  animation:         showAnimation 0.5s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  -moz-transition:    max-height 1s ease-in-out;
  -o-transition:      max-height 1s ease-in-out;
  transition:         max-height 1s ease-in-out;
}
.dropdown .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

<div class="container"> 
  <label for='input-field'>Selection:&nbsp;</label>
  <input type='text' id='input-field' value='' />
  <br /><br />
  
  <ul id='custom-select'>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Select Item
        <i class="icon-arrow close"></i>
      </a>
      <ul class="dropdown-menu hide">
        <li><a href="#" data-optValue="Option 1">Option 1</a></li>
        <li><a href="#" data-optValue="Option 2">Option 2</a></li>
        <li><a href="#" data-optValue="Option 3">Option 3</a></li>
        <li><a href="#" data-optValue="Option 4">Option 4</a></li>
      </ul>
    </li>
  </ul>
</div>

选择一个选项后，有没有办法用“。dropdown-menu a”文本替换“选择项目”文本。就像我选择选项4一样，“选择项目”将替换为“选项4”文本。 实际上Stackoverflow成员之一建议我使用它与输入，所以我们可以存储值。但他忘记了改变文字的DD。所以这就是问题了。

Answer 1

const selectMenu = document.querySelector('#custom-select'),
      selectionInput = document.querySelector('#input-field'),
      dropdown = document.querySelectorAll('.dropdown'),
      dropdownArray = Array.prototype.slice.call(dropdown,0),
      button = document.querySelector('a[data-toggle="dropdown"]'),
      menu = document.querySelector('.dropdown-menu'),
      arrow = button.querySelector('i.icon-arrow');

// Event callback function:
function clickHandler(evt) {  
  evt.preventDefault();
  menu.classList.toggle('show');
  menu.classList.toggle('hide');
  arrow.classList.toggle('open');
  arrow.classList.toggle('close');
  
  let targ = evt.target;
  if (menu.contains(targ)) {
    selectionInput.value = targ.dataset.optvalue;
    dropdown[0].children[0].textContent = targ.textContent
  }
}

// 'Click' event registration:
selectMenu.addEventListener('click', clickHandler, false);



// Purely your code below:
Element.prototype.hasClass = function(className) {
  return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

.text-center {
  text-align: center;
}

*,
*:before,
*:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 350px;
  margin: 50px auto;
}
.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.title {
  font: normal 40px/1.4 'Pacifico', sans-serif;
  text-align: center;
  color: #2980B9;
}

.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #2980B9;
  -webkit-box-shadow: 0 1px 0 #409ad5 inset,
                      0 -1px 0 #20638f inset;
  -moz-box-shadow:    0 1px 0 #409ad5 inset, 
                      0 -1px 0 #20638f inset;
  box-shadow:         0 1px 0 #409ad5 inset,
                      0 -1px 0 #20638f inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown .icon-arrow.open {
  -webkit-transform: rotate(-180deg);
  -moz-transform:    rotate(-180deg);
  -ms-transform:     rotate(-180deg);
  transform:         rotate(-180deg);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition:    -moz-transform 0.6s;
  -o-transition:      -o-transform 0.6s;
  transition:         transform 0.6s;
}
.dropdown .icon-arrow.close {
  -webkit-transform: rotate(0);
  -moz-transform:    rotate(0);
  -ms-transform:     rotate(0);
  transform:         rotate(0);
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition:    -moz-transform 0.6s;
  -o-transition:      -o-transform 0.6s;
  transition:         transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
  display: block;
  color: #6f6f6f;
  background: #EEE;
  -webkit-box-shadow: 0 1px 0 white inset,
                      0 -1px 0 #d5d5d5 inset;
  -moz-box-shadow:    0 1px 0 white inset,
                      0 -1px 0 #d5d5d5 inset;
  box-shadow:         0 1px 0 white inset,
                      0 -1px 0 #d5d5d5 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.dropdown .show {
  display: block;
  max-height: 9999px;
  -webkit-transform: scaleY(1);
  -moz-transform:    scaleY(1);
  -ms-transform:     scaleY(1);
  transform:         scaleY(1);
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-animation:    showAnimation 0.5s ease-in-out;
  animation:         showAnimation 0.5s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  -moz-transition:    max-height 1s ease-in-out;
  -o-transition:      max-height 1s ease-in-out;
  transition:         max-height 1s ease-in-out;
}
.dropdown .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

<div class="container"> 
  <label for='input-field'>Selection:&nbsp;</label>
  <input type='text' id='input-field' value='' />
  <br /><br />
  
  <ul id='custom-select'>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Select Item
        <i class="icon-arrow close"></i>
      </a>
      <ul class="dropdown-menu hide">
        <li><a href="#" data-optValue="Option 1">Option 1</a></li>
        <li><a href="#" data-optValue="Option 2">Option 2</a></li>
        <li><a href="#" data-optValue="Option 3">Option 3</a></li>
        <li><a href="#" data-optValue="Option 4">Option 4</a></li>
      </ul>
    </li>
  </ul>
</div>