Javascript 基于另一个选择动态生成选择

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

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

<select id="beam">

</select>

当选择雷达选项（例如City2）时，我想在波束选择中填入一个选项，用于尽可能多的maxBeams，这些maxBeams具有E选项值，文本仅为该索引号：

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

1.
2.
3.

---

实现这一点并使其易于更新的最简单方法是什么？

您真的不应该使用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>

请选择一个
{{c}}
请选择一个
{{c}}
我的城市群是{{city_group}}
我的城市是{{城市}

请注意内容是如何基于数据的。

---

从

雷达上的
更改
事件开始
选择-更改，检查所选值，并更新新选择。您的尝试在哪里？
<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>