我有一个关于 outerHTML 语法的问题。也有可能我的思路错了。我的html文件如下：<!DOCTYPE html><html><body><label for="language">Choose a language:</label><select name="language" id="language" value="val1"><option value="val1">English</option><option value="val2">German</option></select><p>You selected: <span id="language"></span></p> <!-- shall display either "English" or "German" --><p>You selected the following option: <span id="language"></span></p> <!-- shall display either "val1" or "val2" --><script src="./script.js"></script></body></html>我指的是一个脚本，目前唯一的内容是var selectedlang = document.getElementById("language").outerHTML;在 html 文件中，它应显示它的值和变量。我不知道如何进行。
1 回答
慕容森
TA贡献1853条经验 获得超18个赞
一个文档中不能有多个具有相同id值的元素；您当前的标记使用id="language"三个不同的元素。您至少需要更改其中两个。
我想你问的是如何：
在两个 s 中显示当前选择的选项的文本和值
span，以及如果用户更改选择，如何更新您显示的内容。
如果您只想要选定的值，则可以使用元素value的属性select。但是对于文本和值，您需要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 = "";
}
}
在那个例子中，我让它接受了select和spans 作为函数的参数。
您将在页面加载时调用该函数，然后在 的事件触发时再次select调用input。
这是一个例子：
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>
（请注意，我更改了所有三个id。）
添加回答
举报
0/150
提交
取消