在选择选项时更改自定义下拉列表的文本答案

【问题标题】：Change text of custom dropdown on selecting an option在选择选项时更改自定义下拉列表的文本
【发布时间】：2018-06-02 06:17:48
【问题描述】：

我正在使用 CSS 和 Vanilla JavaScript (Plain JS) 编写自定义 dropdown。我尝试使用以下代码在单击选项时选择并设置下拉列表的text：

window.onload = () => {
  let [...options] = document.querySelectorAll('#select .opt');
  let select = document.getElementById('select');
  
  select.addEventListener('click', () => {
    options.forEach(opt => {
      opt.classList.toggle('showOpt');
    });
  });
  options.forEach(opt => {
    opt.addEventListener('click', event => {
      let optArr = select.innerText.split('\n');
      optArr[0] = opt.innerText;
      select.innerText = optArr.join('\n');
    });
  });
}

#select {
  border: none;
  width: 100px;
  padding: 5px;
}
.fas {
  float: right;
}
.opt {
  list-style: none;
  display: none;
  margin: 3px;
  padding: 4px;
  border-bottom: 1px solid green;
}
.opt:hover {
  background: white;
}
.showOpt {
  display: block !important;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<button id='select'>
  Level 1<i class="fas fa-chevron-down"></i><br/>
  <li class='opt' value='1'>Level 1</li>
  <li class='opt' value='2'>Level 2</li>
  <li class='opt' value='3'>Level 3</li>
  <li class='opt' value='4'>Level 4</li>
</button>

Here是上面代码的笔。

现在，让用户选择 Level 3 选项。
所以，我的问题是，我该如何更新使用JavaScript / ES6的下拉文本（默认为1级）？

我已经尝试使用 JavaScript 的 element.innerText 函数，但它不起作用！

【问题讨论】：

标签： javascript html css ecmascript-6 dropdown

【解决方案1】：

您可以将select 的标题文本用一个span 包裹起来，以便稍后定位它并根据单击项目的textContent 更改其textContent。

window.onload = () => {
  let [...options] = document.querySelectorAll('#select .opt');
  let select = document.getElementById('select');
  const selectHead = document.querySelector("#selectHeader");

  select.addEventListener('click', () => {
    options.forEach(opt => {
      opt.classList.toggle('showOpt');
    });
  });

  options.forEach(opt => {
    opt.addEventListener('click', event => {
      selectHead.textContent = event.target.textContent;
    });
  });
}

#select {
  border: none;
  width: 100px;
  padding: 5px;
}
.fas {
  float: right;
}
.opt {
  list-style: none;
  display: none;
  margin: 3px;
  padding: 4px;
  border-bottom: 1px solid green;
}
.opt:hover {
  background: white;
}
.showOpt {
  display: block !important;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<button id='select'>
  <span id='selectHeader'>Level 1</span><i class="fas fa-chevron-down"></i><br/>
  <li class='opt' value='1'>Level 1</li>
  <li class='opt' value='2'>Level 2</li>
  <li class='opt' value='3'>Level 3</li>
  <li class='opt' value='4'>Level 4</li>
</button>

【讨论】：

【解决方案2】：

为所选选项赋予样式，并在单击选项时，将所选类的innerText 替换为单击选项的内部文本。

window.onload = () => {
  let [...options] = document.querySelectorAll('#select .opt');
  let select = document.getElementById('select');
  let selectedOption = document.querySelector('.visible');
  
  select.addEventListener('click', () => {
    options.forEach(opt => {
      opt.classList.toggle('showOpt');
    });
  });
  options.forEach(opt => {
    opt.addEventListener('click', event => {
      selectedOption.innerText = opt.innerText;
    });
  });
}

#select {
  border: none;
  width: 100px;
  padding: 5px;
}
.fas {
  float: right;
}
.opt {
  list-style: none;
  display: none;
  margin: 3px;
  padding: 4px;
  border-bottom: 1px solid green;
}
.opt:hover {
  background: white;
}
.showOpt {
  display: block !important;
}

li {
  list-style: none;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<button id='select'>

    <li class="visible">Level 1<i class="fas fa-chevron-down"></i></li>
    <li class='opt' value='1'>Level 1</li>
    <li class='opt' value='2'>Level 2</li>
    <li class='opt' value='3'>Level 3</li>
    <li class='opt' value='4'>Level 4</li>

</button>

【讨论】：