Javascript 我有两个选择。如何使第二个选择菜单选项仅根据第一个选择菜单中选择的内容显示？

马萨诸塞州波士顿
新泽西州李堡
新泽西州哈肯萨克
新泽西州纽瓦克
纽约州纽约市
北阿灵顿，新泽西州
宾夕法尼亚州费城
华盛顿特区

首先，您不应该使用同名的两个ID

例如，将第二个id更改为“asd1”，可以执行以下操作：

function foo() {
    var selectedElem = document.getElementById("asd");
    var selectedText = e.options[e.selectedIndex].text;

    var x = document.getElementById("asd1");
    var option = document.createElement("option");
    option.text = "Kiwi";
    x.add(option);
}

抱歉，忘记添加onchange方法：

在第一个选择元素中：

<select class="form-control" id="asd" onchange="foo()">

---

这很有效。您需要在javascript中创建一个配置对象，用于存储城市和目的地。使用配置从选择填充。然后在FROM select上使用

eventListener

，以获取所选值。最后，清除并填充以使用配置中列出的新选择的值（目标）进行选择

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');

// Config
// Key: City
// Value: Array of city destinations
var config = {
  'BOSTON, MA' : [ 'NEY YORK CITY, NY', 'WASHINGTON D.C.' ],
  'FORT LEE, NJ' : [ ],
  'HACKENSACK, NJ' : [],
  'NEWARK, NJ' : [ ],
  'NORTH ARLINGTON, NJ' : [],
  'NEY YORK CITY, NY' : [ 'PHILADELPHIA, PA' ],
  'PHILADELPHIA, PA' : [ ],
  'WASHINGTON D.C.' : [ ]
}

// add item method

var addItemToSelect = function (select, label) {
    var option = document.createElement('option');
    option.textContent = label;
    option.value = label;
    select.appendChild(option);
}

// populate select 1

for (var city in config) {
  addItemToSelect(select1, city);
}

select1.addEventListener('change', function () {

  // get selection's destinations
  var selection = this.options[this.selectedIndex].value;
  var destinations = config[selection];

  // clear select 2
  select2.length = 0

  // populate select 2
  addItemToSelect(select2, '');
  for (var key in destinations) {
    addItemToSelect(select2, destinations[key]);
  }

});

还有HTML

<div class="input-group" style="margin-left: 20px;">

  <div>
    <label>From</label>
    <select class="form-control" id="select1">
      <option></option>
    </select>
  </div>
  <div>
    <label>To</label>
    <select class="form-control" id="select2">
      <option></option>
    </select>
  </div>
</div>

从…起
到

---

这里有一个小问题：

可能重复是的，这只是一些CSS的东西，我要把它改成类。不过我会试试看。另外，我如何在HTML中实现这个函数？我不知道在HTML中实现这个函数是什么意思，但是如果你想在HTML文件中包含这个函数，你必须把它放在一个脚本标记中，比如“function foo（）…”啊。唯一的变化就是我所问的