Question

我在html中创建了一个下拉列表标记为“area”的值。另一个下拉列表标记为汽车，其中包含区域的optgroups和完整的汽车列表。

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

下面的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

＆＃13;

$('#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());
});

＆＃13;

<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>

＆＃13;

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

1 个答案: