将 HTML Id 与对象的属性匹配

Question

我有一个包含两种车辆的 HTML 列表：自行车和卡车，一个带有关联属性（“车轮”和“窗户”）的表单，以及一个包含所述属性的关联值的嵌套对象（“车辆”）。

我想编写一个函数，它将获取所选车辆的 id，将其与嵌套对象中的对象进行匹配，然后使用适当的属性填写表单。

例如，如果您从列表中选择“van”，则表单会用“2”填充“wheels”，用“1”填充 windows。

理想情况下，该功能应足够灵活，以允许包含额外的车辆。

任何帮助将不胜感激。谢谢。

var bikeDetails = {
  wheels: 2,
  windows: 0
};
var vanDetails = {
  wheels: 4,
  windows: 1
};

var vehicles = {
  bike: bikeDetails,
  van: vanDetails
};

<div id="classSelectWrapper">
  <form>
    <select id="vehicleList">
      <option value="bike">bike</option>
      <option value="van">van</option>
    </select>
  </form>
</div>


<div class="vehicleDetails">
  <form id="vehicleProps">
    <p>
      <label for="wheels" value="">wheels:</label>
      <input id="wheels" type="text" name="wheels" value="" disabled>
    </p>

    <p>
      <label for="windows">windows:</label>
      <input id="windows" type="text" name="windows" value="" disabled>
    </p>
  </form>
</div>

Answer 1

您的脚本可能是这样的：

var select = document.getElementById('vehicleList');
select.addEventListener('change', function () {
    var selected = this.selectedOptions[0].value,
        wheels = document.getElementById('wheels'),
        windows = document.getElementById('windows');

    wheels.value = vehicles[selected].wheels;
    windows.value = vehicles[selected].windows;
});

Answer 2

你的问题的解决方案可以这样实现，希望对你有所帮助：

document.querySelector("#vehicleList").addEventListener("change", function(e) {
  let value = e.target.options[e.target.selectedIndex].value;
  if(value in vehicles) {
    document.querySelector("#wheels").value = vehicles[value].wheels;
    document.querySelector("#windows").value = vehicles[value].windows;
  }
});