JavaScript根据选择更改多个DIVS内容

Question

我有一个下拉列表选择，具有各种选项和多个DIV，这些选项应根据所选选项(如So(更改内容(BOLD下拉选项(：

房屋＃1
房屋颜色＃1
房屋位置＃1
房屋尺寸＃1

房屋＃2
房屋颜色＃2
房屋位置＃2
房屋尺寸＃2

大多数解决方案都使用 show/hide脚本 ，但是对我来说不起作用，因为我最终会为每个颜色，位置，位置，尺寸等。

我很想有价值的选择：

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

并将ID用于Divs，例如

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

，并在逻辑为

的背景中在单独的JS脚本中具有所有相应的值

div id ='颜色'is(房屋1 =房屋颜色＃1(，(房屋2 =房屋颜色＃2(等。

div id ='大小'是(房屋1 =房屋尺寸＃1(，(房屋2 =房屋尺寸＃2(等。

我希望这是有道理的。

Answer 1

使用Select的onchange-事件将当前的房屋值传递到检索相应值的函数，并通过设置各自Divs的innerHTML -Attribute来检索相应的值并更新页面。

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]
);

Answer 2

您可以通过这种方式进行...

$("#house").change(function(){
 var house = $("#house").val();
 $("#selectedHouse").html('<b>House #'+house+'</b>');
 $("#color").html('House Color #'+house);
 $("#location").html('House Location #'+house);
 $("#size").html('House Size #'+house);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="house" name="house">
<option value="1">House #1</option>
<option value="2">House #2</option>
<option value="3">House #3</option>
</select>
<div id="selectedHouse"><b>House #1</b></div>
<div id="color">House Color #1</div>
<div id="location">House Location #1</div>
<div id="size">House Size #1</div>

Answer 3

给出您的下拉列表和更改其值调用此更新功能传递下拉函数

<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>

您可以具有根据您的房屋选择来重新检索颜色，位置和尺寸的功能。我假设颜色，位置和大小划分为文本框。根据您的DIV元素修改功能

  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.
      }