时间戳

首页 > 解决方案 > 基于另一个选择动态生成一个选择

javascript - 基于另一个选择动态生成一个选择

问题描述

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

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

When a radar option is selected for example City2, I would like to fill the beam select with an option for as many maxBeams that have thee option value and text to simply be that index number:

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

完成此操作并使其易于更新的最简单方法是什么？

标签： javascriptjquery

解决方案

你真的不应该使用 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# 选择 https://vuejs.org/v2/guide/list.html

推荐阅读