Javascript 根据选择更改多个 Div 内容

Question

我有一个包含各种选项和多个 div 的下拉选择，它们应该根据所选选项更改内容，如下所示(下拉选项以粗体显示):

1 号房子
房子颜色 #1
房屋位置 #1
房子大小 #1

2 号房子
房子颜色 #2
房屋位置 #2
房子大小 #2

大多数解决方案都使用显示/隐藏脚本，但这对我来说行不通，因为我最终会为每种颜色、位置隐藏太多重复的 div，尺寸等。

我希望有值的选项:

<select>
<option value="house 1">House #1</option>
<option value="house 2">House #2</option>
<option value="house 3">House #3</option>
</select>

并为 div 使用 ID，例如

<div id="color">House Color #1</div>
<div id="location">House Location #1</div>
<div id="size">House Size #1</div>

并在逻辑所在的后台单独的js脚本中的某处拥有所有相应的值

div id='color' 是(house 1 = House Color #1)，(house 2 = House Color #2)等等。

div id='size' 是(house 1 = House Size #1)，(house 2 = House Size #2)等等。

我希望这是有道理的。

Answer 1

使用 select 的 onchange 事件将当前房屋值(value)传递给一个函数，该函数检索相应的值并通过设置您的 innerHTML 属性更新您的页面各自的 div。

const data = {
  "house 1":{
    color:"yes",
    location:"Mars",
    size:"small",
  },
  "house 2":{
    color:"all",
    location:"Neverland",
    size:"rather huge",
  },
  "house 3":{
    color:"mauve",
    location:"Los Angeles",
    size:"It's ok",
  },
};

function showHouse(value) {
  document.getElementById("color").innerHTML=data[value]["color"];
  document.getElementById("location").innerHTML=data[value]["location"];
  document.getElementById("size").innerHTML=data[value]["size"];
}
showHouse("house 1");
document.querySelector("select").onchange=e=>showHouse(e.target.value);

<select>
<option value="house 1">House #1</option>
<option value="house 2">House #2</option>
<option value="house 3">House #3</option>
</select>

<div id="color">House Color #1</div>
<div id="location">House Location #1</div>
<div id="size">House Size #1</div>

---

奖励:如果您计划拥有更多字段，您可以像这样缩短代码:

["color","location","size","altitude"].forEach(
    a=>document.getElementById(a).innerHTML=data[value][a]
);