问题描述
点击下拉列表中的选项，加载选项对应的列表信息。
给定HTML：
<html>
<head>
</head>
<body>
<h1>A few of the Game of Thrones characters</h1>
<form>
<label for="house">House</label>:
<select name="house" id="house">
<option value="" selected>Select a house</option>
</select>
</form>
<ul id="characters"></ul>
</body>
</html>显示结果：
解决方法
我的：
// Write your code here
const houseElement = document.createElement("option");
houseElement.textContent = "Lannister";
houseElement.id = "Lannister";
houseElement.value="Lannister";
document.getElementById("house").appendChild(houseElement);
document.getElementById("house").addEventListener("change",e=>{
const ui1=document.createElement("li");
ui1.textContent="Tywin";
const ui2=document.createElement("li");
ui2.textContent="Cersei";
const ui3=document.createElement("li");
ui3.textContent="Jaime";
let ui4=document.createElement("li");
ui4.textContent="Tyrion";
if(e.target.value === "Lannister")
{
document.getElementById("characters").appendChild(ui1);
document.getElementById("characters").appendChild(ui2);
document.getElementById("characters").appendChild(ui3);
document.getElementById("characters").appendChild(ui4);
}
});显示效果：
选中这个选项会加载下面的选项
参考答案：
/*
Game of Thrones characters
*/
// Character list. Each house has a name and a code
const houses = [
{
code: "ST",
name: "Stark"
},
{
code: "LA",
name: "Lannister"
},
{
code: "BA",
name: "Baratheon"
},
{
code: "TA",
name: "Targaryen"
}
];
// Return an array of characters belonging to a house
const getCharacters = houseCode => {
switch (houseCode) {
case "ST":
return ["Eddard", "Catelyn", "Robb", "Sansa", "Arya", "Jon Snow"];
case "LA":
return ["Tywin", "Cersei", "Jaime", "Tyrion"];
case "BA":
return ["Robert", "Stannis", "Renly"];
case "TA":
return ["Aerys", "Daenerys", "Viserys"];
default:
return []; // Empty array
}
};
// Create and return an HTML <option> tag
const createOptionElement = (text, value) => {
const element = document.createElement("option");
element.textContent = text;
element.value = value;
return element;
};
// Create and return and HTML <li> tag
const createLiElement = text => {
const element = document.createElement("li");
element.textContent = text;
return element;
};
const houseElement = document.querySelector("select");
// Fill the house list
houses.forEach(house => {
houseElement.appendChild(createOptionElement(house.name, house.code));
});
// Handle house change event
houseElement.addEventListener("change", e => {
// The value of the event target is the house code
const characters = getCharacters(e.target.value);
const characterElement = document.getElementById("characters");
// Empty the list
characterElement.innerHTML = "";
// Add each character to the list
characters.forEach(character => {
characterElement.appendChild(createLiElement(character));
});
});效果：
