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插件来处理这个？

DEMO：https://jsfiddle.net/gafyvbL9/

如何复制错误：在状态下拉列表（左侧）中，选择拉各斯。然后选择阿南布拉。然后再选择拉各斯，然后选择阿南布拉。您可以看到LGA下拉列表（右侧）变空。为什么会这样？提前致谢

Answer 1

与你的小提琴一起玩，我认为问题是当你执行$(lgaSelect).html()时，你正在删除那里存储的所有信息。尝试将其存储在处理程序之外。

let $options = $('#lgaSelect').clone();
$("#stateSelect").on('change',function() { 
  let state = $(this).find('option:selected').text();
  $("#lgaSelect").html($options.find(`optgroup[label="${state}"]`).html());
});

编辑：

请注意optgroup[label="${state}"]中的双引号。这可以防止包含空格的状态出现问题，例如Akwa Ibom。

jquery change（）事件表现奇怪

1 个答案: