问:您将如何制作一个 html 下拉列表，其中包含根据您选择的国家/地区打开网页内容的国家/地区?

Question

我正在尝试为国家/地区创建一个 html 下拉列表，这些国家将根据选择的国家/地区在网站上打开不同的内容。这是否可以纯粹在 html 上完成？提前谢谢。

用于打开内容的下拉列表的演示

Answer 1

我希望这对你有用。不幸的是，如果你想操纵 DOM，你需要使用一点点 JS。

function changeContent() {
let contents = [
{country: "aus", content: "Australia!!!"},
{country: "bel", content: "Belgia!!!"},
{country: "geo", content: "Georgia!!!"},
]

let selectedCountry = document.getElementById("dropdown").value;
contents.forEach(location => {
if(location.country == selectedCountry) {
document.getElementById("selCountry").innerText = location.content;
}
})
}

div {
margin-left: 120px;
}

<select id="dropdown" onchange="changeContent()">
<option disabled selected value> -- countries -- </option>
<option value="aus">Australia</option>
<option value="bel">Belgia</option>
<option value="geo">Georgia</option>
</select>
<div>Selected country: <span id="selCountry"><span/>