Question

我试图通过引用对象数组中的值，基于另一个选择中的选择动态地生成一个选择中的选项列表。

<select id="radar">
    <option value="15">City1</option>
    <option value="64">City2</option>
</select>

<select id="beam">

</select>

对象：

var radars = {
  "city1": {
    "name": "city1",
    "maxBeams": 16
  },

  "city2": {
    "name": "city2",
    "maxBeams": 3
  }
}

当选择雷达选项（例如City2）时，我想用一个选项来填充选择的波束，使其具有最多maxBeam的选项，这些maxBeam具有您的选项值，而文本只是该索引号：

<select id="beam">
    <option value="1">1 </option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

最简单的方法是做到这一点并使其易于更新？

Answer 1

您实际上不应该使用javascript动态生成此类内容。您应该使用Vue.js，React或Angular之类的框架。您可以使用javascript直接自制解决方案，但这只会增加您的技术负担。

您应该这样做：

<div vue="app">
  <select v-model="city_group">
    <option disabled value="">Please select one</option>
    <option v-for="c in cities">{{c}}</option>
  </select>
  <select v-if="city_group != ''" v-model="city">
    <option disabled value="">Please select one</option>
    <option v-for="c in city_info[city_group]">{{c}}</option>
  </select>
  <h1>My city group is {{city_group}}</h1>
  <h1>My city is {{city}}</h1>
</div>

注意内容如何基于数据。 https://codepen.io/Snorghma/pen/QWWjOmq

https://vuejs.org/v2/guide/forms.html#Select https://vuejs.org/v2/guide/list.html

根据另一个选择动态生成一个选择

1 个答案: