javascript - jquery change() 事件表现得很奇怪

Question

所以我正在制作两个下拉菜单。一个依赖于另一个，就像当您在第一个下拉列表中选择一个选项时，另一个中的值应该改变。我用 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());
    }

这可行，但有一个错误。如果您在州下拉列表中选择随机选项，然后向上选择拉各斯或阿布贾，LGA 下拉列表将变为空白。几天来我一直试图找出为什么会发生这种情况，但仍然无法解决。有没有 jquery 插件来处理这个问题？

演示:https://jsfiddle.net/gafyvbL9/

如何复制错误:在州下拉列表(左)中，选择拉各斯。然后选择阿南布拉。然后再次选择拉各斯，然后选择阿南布拉。您可以看到 LGA 下拉列表(右)变为空。为什么会发生这种情况？提前致谢

Answer 1

克隆存储的选项，这样就不会从 $(hiddenLga) 中删除原始选项

更改:

$(lgaSelect).html(options.children());

至

$(lgaSelect).html(options.children().clone());