编码练习：JavaScript 点击下拉列表显示相关信息

最新推荐文章于 2023-06-09 17:13:45 发布

kllo__

最新推荐文章于 2023-06-09 17:13:45 发布

阅读量827

点赞数

分类专栏： javascript 文章标签： javascript linq webview

本文链接：https://blog.csdn.net/kllo__/article/details/122997419

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

这篇博客讨论了如何使用JavaScript根据用户选择的下拉列表选项动态加载对应列表信息。示例代码展示了如何创建选项元素并添加事件监听器，当选择Lannister家族时，加载相关角色到页面列表中。参考答案则提供了更通用的解决方案，通过一个包含多个家族信息的对象数组，实现了下拉列表的填充和角色信息的动态显示。

摘要由CSDN通过智能技术生成

问题描述

点击下拉列表中的选项，加载选项对应的列表信息。

给定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));
  });
});

效果：