所以我要进行两个下拉菜单。一个依赖于另一个，如在第一个下拉列表中选择一个选项时，另一个中的值应更改。我正在使用Symfony3.4渲染我的表单，所以我对此没有太多控制。 （我认为我不能在其中添加动态类名/值名）。如果相关，我正在使用Bulma CSS框架。
这是我的选择框的外观：
状态：
<select name="state" id="stateSelect">
<option value="1">Lagos</option>
<option value="2">Abuja</option>
<option value="3">Rivers</option>
<option value="4">Ogun</option>
<option value="5">Oyo</option>
<option value="6">Anambra</option>
<option value="7">Enugu</option>
<option value="8">Akwa Ibom</option>
<option value="9">Adamawa</option>
...
<option value="37">Zamfara</option>
</select>
LGA（地方政府区域）：
<select id="lgaSelect" name="areas_registration[lga]">
<optgroup label="Lagos">
<option value="1">Abule Egba</option>
<option value="2">Agege</option>
<option value="3">Ajah</option>
<option value="4">Alimosho</option>
<option value="5">Amuwo Odofin</option>
...
</optgroup>
<optgroup label="Abuja">
<option value="38">Apo</option>
<option value="39">Asokoro</option>
<option value="40">Central Area</option>
<option value="41">Chika</option>
<option value="42">Dakibiyu</option>
...
</optgroup>
....35 more optgroups
</select>
我的目标是，当用户从“状态”下拉列表中选择一个选项时，LGA下拉列表应仅具有与所选状态相关的选项。我为此使用optgroup标签。我在JavaScript中尝试的是，在页面加载时，我克隆了LGA下拉列表，将其隐藏，将其称为lgaSelectSeed并将其用于播种原始LGA下拉列表：（＃hiddenLgas只是一个空div）
$(function () {
var stateSelect = $("#stateSelect") || null;
var lgaSelect = $("#lgaSelect") || null;
var hiddenLga = $("#hiddenLgas") || null;
$(hiddenLga).html(lgaSelect.clone().prop('id', 'lgaSelectSeed'));
stateSelect.change(function () {
var select_class = $(this).find('option:selected').text();
var options = $(lgaSelectSeed).find('optgroup[label="' + select_class + '"]');
$(lgaSelect).html(options.children());
}
这可行，但是其中有一个错误。如果在状态下拉列表中选择随机选项，然后向上选择Lagos或Abuja，则LGA下拉列表将变为空白。我一直在努力弄清楚为什么会发生这种情况，但仍然无法解决。是否有任何jQuery插件来处理呢？
演示：https://jsfiddle.net/gafyvbL9/
如何复制错误：在状态下拉列表（左）中，选择拉各斯。然后选择Anambra。然后再次选择拉各斯，然后选择Anambra。您会看到LGA下拉列表（右侧）为空。为什么会这样呢？提前致谢
最佳答案
复制存储的选项，这样就不会从$(hiddenLga)中删除原始文件
更改：
$(lgaSelect).html(options.children());
至
$(lgaSelect).html(options.children().clone());