Javascript querySelector 用於 select 元素

Question

我目前正在嘗試以編程方式獲取和以編程方式從普通 Javascript 中的選擇元素中設置所選值的 innerHTML。 這是我的代碼：

const select = document.querySelector("#myDiv select"); 
console.log(select.selectedOptions[0].option.innerHTML);

如果我寫 console.log(select.selectedOptions)，我會得到以下信息：

這是我想要訪問和編輯的 innerHTML inside 選項，但出現錯誤

TypeError: Cannot read property 'option' of undefined

我在網上沒有找到太多關於此的信息，因此我在這里詢問。 實現這一目標的最佳方法是什么？

謝謝！

Answer 1

你是這個意思？

您不需要 selectedOptions[0] 之后的 .option

 const select = document.querySelector("#myDiv select"); console.log(select.selectedOptions[0].textContent); // or.text // alternative console.log(select.options[select.selectedIndex].textContent); // setting the text: select.selectedOptions[0].text = "Number one"

 <div id="myDiv"> <select> <option value="1">one</option> </select> </div>

Answer 2

select.selectedOptions[0]返回實際的option元素本身，因此您可以直接從中獲取和設置innerHTML 。

還要確保在選項上設置了selected ，以便默認選擇某些內容，並且select.selectedOptions永遠不會為空。

 const select = document.querySelector("#myDiv select"); console.log("Initial:", select.selectedOptions[0].innerHTML); const button = document.getElementById('toggle'), newText = document.getElementById('newText'); button.addEventListener('click', () => select.selectedOptions[0].innerHTML = newText.value);

 <div id="myDiv"> <select id="mySelect"> <option value="option_a" selected>Option A</option> <option value="option_b">Option B</option> </select><br> <input id="newText" type="text" placeholder="Enter text here..."></input> <button id="toggle">Change</button> </div>

Answer 3

只需刪除innerHTML 之前的option 。 按照代碼。

const select = document.querySelector("#myDiv select"); 
const optionSelected = select.selectedOptions[0]; 
console.log(optionSelected); 
optionSelected.innerHTML = 'New Demo'

強文本

工作演示

Answer 4

您可以使用 css 選擇器找到所選選項並閱讀其textContent

 console.log(document.querySelector("#myDiv select option:checked").textContent);

 <div id="myDiv"> <select> <option value="1">one</option> </select> </div>

Answer 5

在 JavaScript 中有一個使用：checked 偽類的單行代碼來獲取選定的文本或值。 在這里，我們假設我們有一個 id="searchList" 的 select。

const selected = document.querySelector('#searchList :checked');//returns selected node
console.log(selected.innerText);//get the selected option text
console.log(selected.value);//get the selected option value

驗證這確實適用於 select 元素中的選定選項，這是官方文檔：

The:checked CSS 偽類選擇器表示任何已選中或切換到 state 的單選 ()、復選框 () 或選項 (in a) 元素。

:檢查過 MDN