選擇選項時更改自定義下拉菜單的文本

Question

我正在使用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> 

這是上面代碼的筆。

現在，讓用戶選擇“ 3級”選項。
因此，我的問題是，如何使用JavaScript / ES6 更新下拉文本 （默認情況下為Level 1）？

我已經使用JavaScript的element.innerText函數嘗試了它，但是它不起作用！

Answer 1

您可以僅用橫距包裹select內容的標題文本，以便以后可以將其作為目標並根據單擊項的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> 

Answer 2

給所選選項指定樣式，然后單擊選項，將所選類的innerText替換為clicked選項的內部文本。

 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>