jquery - 为什么我的 Jquery 代码不能在我的下拉列表中多次运行？

Question

我在 html id 中创建了一个带有值的标记为“区域”的下拉列表。 另一个标记为汽车的下拉列表，包含区域的选择组和完整的汽车列表。

我想要完成的是将太长的汽车下拉列表过滤到较小的可管理列表中，因此是我选择第一个区域下拉列表的原因。

下面的 Jquery 代码隐藏了完整的汽车列表，并创建了一个仅包含所选 optgroup 数据的临时下拉列表:

$('select#car').after('<select id="parkingLot"><option value="0">ALL</option></select>');
$('select#car').hide();
$('select#area').change(function() {
  var area = $(this).val();
  $("#parkingLot").html($('select#car optgroup[label="' + area  + '"]'));
});

此代码有效，但每个 optgroup 只能运行一次。示例:如果您选择区域 1 并检查第二个下拉列表，它显示正确，然后检查区域 2，它显示正确，但再次检查后区域 1 不起作用。

任何帮助将不胜感激。

Answer 1

我认为这是因为您正在从原始选择中移动 optgroup

$('#car').after('<select id="parkingLot"><option value="0">ALL</option></select>');
$('#car').hide();
$('#area').change(function() {
  var area = $(this).val();
  $("#parkingLot").html($('#car optgroup[label="' + area + '"]').clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="car">
  <optgroup label="a1">
    <option>a1.1</option>
    <option>a1.2</option>
  </optgroup>
  <optgroup label="a2">
    <option>a2.1</option>
    <option>a2.2</option>
  </optgroup>
  <optgroup label="a3">
    <option>a3.1</option>
    <option>a3.2</option>
  </optgroup>
  <optgroup label="a4">
    <option>a4.1</option>
    <option>a4.2</option>
  </optgroup>
</select>
<select id="area">
  <option></option>
  <option>a1</option>
  <option>a2</option>
  <option>a3</option>
  <option>a4</option>
</select>