Динамически генерировать выбор на основе другого выбора

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, я хотел бы заполнить выбор луча опцией для максимально возможного количества maxBeams, у которых есть значение опции и текст, чтобы это было просто индексное число:

<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