一個(gè)文檔中不能有多個(gè)具有相同id值的元素；您當(dāng)前的標(biāo)記使用id="language"三個(gè)不同的元素。您至少需要更改其中兩個(gè)。
我想你問(wèn)的是如何：
在兩個(gè) s 中顯示當(dāng)前選擇的選項(xiàng)的文本和值span，以及
如果用戶更改選擇，如何更新您顯示的內(nèi)容。
如果您只想要選定的值，則可以使用元素value的屬性select。但是對(duì)于文本和值，您需要selectedIndex屬性和options集合：
function showTextAndValue(select, textSpan, valueSpan) {
const option = select.options[select.selectedIndex];
if (option) {
textSpan.textContent = option.text;
valueSpan.textContent = option.value;
} else {
// No option is selected
textSpan.textContent = "";
valueSpan.textContent = "";
}
}
在那個(gè)例子中，我讓它接受了select和spans 作為函數(shù)的參數(shù)。
您將在頁(yè)面加載時(shí)調(diào)用該函數(shù)，然后在 的事件觸發(fā)時(shí)再次select調(diào)用input。
這是一個(gè)例子：
const select = document.getElementById("language-select");
const textSpan = document.getElementById("text-span");
const valueSpan = document.getElementById("value-span");
function showTextAndValue(select, textSpan, valueSpan) {
const option = select.options[select.selectedIndex];
if (option) {
textSpan.textContent = option.text;
valueSpan.textContent = option.value;
} else {
// No option is selected
textSpan.textContent = "";
valueSpan.textContent = "";
}
}
// Show on page load
showTextAndValue(select, textSpan, valueSpan);
// Hook the `input` event
select.addEventListener("input", () => {
// Update the contents of the elements
showTextAndValue(select, textSpan, valueSpan);
});
<label for="language">Choose a language:</label>
<select name="language" id="language-select" value="val1">
<option value="val1">English</option>
<option value="val2">German</option>
</select>
<p>You selected: <span id="text-span"></span></p> <!-- shall display either "English" or "German" -->
<p>You selected the following option: <span id="value-span"></span></p> <!-- shall display either "val1" or "val2" -->
<script src="./script.js"></script>
（請(qǐng)注意，我更改了所有三個(gè)id。）
