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

我有一个下拉选择，其中包含各种选项和多个div，这些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>

1号楼
第2栋
第三栋

并对div使用id，如

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

House Color#1
房屋位置#1
房屋面积#1

并将所有相应的值放在逻辑所在的后台单独的js脚本中

div id='color'是（house 1=house color#1），（house 2=house color#2）等

div id='size'是（房子1=房子大小1），（房子2=房子大小2）等

---

我希望这是有意义的。

你可以用这种方式来做

$（“#房子”）.change（函数（）{
var house=$（“#house”）.val（）；
$（“#selectedHouse”）.html（'House#'+House+''）；
$（“#color”）.html（'House color#'+House）；
$（“#位置”）.html（'House location#'+House）；
$（“#size”）.html（'House size#'+House）；
});

1号楼
第2栋
第三栋
1号楼
房屋颜色#1
房屋位置#1
House Size#1
为下拉列表提供id，当其值发生变化时，通过下拉选择调用此更新函数

<select id=house onChange= update(this)>
<option value="house 1">House #1</option>
<option value="house 2">House #2</option>
<option value="house 3">House #3</option>
</select>

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


const数据={
“第1家”：{
颜色：“是”，
地点：“火星”，
尺寸：“小”，
},
“第二宫”：{
颜色：“全部”，
地点：“梦幻岛”，
尺寸：“相当大”，
},
“第三宫”：{
颜色：“淡紫色”，
地点：“洛杉矶”，
尺码：“没关系”，
},
};
功能展示厅（价值）{
document.getElementById（“color”）.innerHTML=data[value][“color”]；
document.getElementById（“location”）.innerHTML=data[value][“location”]；
document.getElementById（“size”）.innerHTML=data[value][“size”]；
}
展厅（“1号展厅”）；
document.querySelector（“select”）.onchange=e=>showHouse（e.target.value）

1号楼
第2栋
第三栋
房屋颜色#1
房屋位置#1
房屋大小#1
id必须是唯一的。使用数据属性或类。谢谢！这正是我所需要的：）我会投票，但我的代表不让我投票。事实上，我在一个页面上有多个下拉选择，当我为另一个下拉列表复制你的代码时，它会停止工作。。当然，我设置了唯一的数据、展厅和ID。但它不起作用。关于如何在一个页面上实现多个下拉列表的任何提示？非常感谢。可能是因为
document.querySelector（“select”）
。。您是否为每个select指定了一个id？然后将其替换为
document.getElementById（“selectID”）
抱歉，我实际上已经弄明白了，回到这里看到了您的评论。是的，它是选择ID。现在它工作得很好。再次感谢你，老兄！
  function update(house){
        var color = document.getElementById("color");
        color.value = getColor(house);// you can call the js file which returns color based on house
var size = document.getElementById("size");
        size.value = getColor(house);// you can call the js file which returns size based on house
var location = document.getElementById("size");
        location.value = getColor(house);// you can call the js file which returns location based on house
        var selection = dropdown.value;
        console.log(selection);
        var emailTextBox = document.getElementById("email");
        // assign the email address here based on your need.

      }