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

Question

https://jsfiddle.net/adm0L6x1/

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

  <select class="form-control" id="asd">
    <option></option>
    <option>BOSTON, MA</option>
    <option>FORT LEE, NJ</option>
    <option>HACKENSACK, NJ</option>
    <option>NEWARK, NJ</option>
    <option>NEY YORK CITY, NY</option>
    <option>NORTH ARLINGTON, NJ</option>
    <option>PHILADELPHIA, PA</option>
    <option>WASHINGTON, D.C</option>
  </select>

  <select class="form-control" id="asd">
    <option></option>
  </select>
</div>

所以基本上我正在制作一个表格，以便用户也可以选择目的地。当我单击“发件人”中的一个选项时，我只希望某些选项显示在“收件人”中。例如，如果他们选择 From:Boston, MA 我只希望纽约市和华盛顿特区也出现在其中。但如果我选择 From: NYC，我只希望费城也出现在其中。我查看了几个 jquery/javascript 示例，但在这个确切的场景中找不到任何东西。

Answer 1

这很好用。您想在 javascript 中创建一个存储城市和目的地的配置对象。使用配置填充 FROM 选择。然后在 FROM 选择上使用 eventListener 来获取选定的值。最后使用配置中列出的新选择的值（目的地）清除并填充 TO 选择。

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>

这是一个小提琴：https://jsfiddle.net/33tcpLon/

Answer 2

首先，您不应该使用 2 个具有相同名称的 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()">