javascript - 在特定索引处附加选择选项

Question

我有两个选择下拉菜单

City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>

Street:
<select id="street" name="street">
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>

在这里，我希望仅当 city 的值为 1 和 2 时才显示街道 B 。因此我编写了一个带有删除和追加功能的 jQuery 函数

$(function() {
  $('#city').change( function() {
    var val = $(this).val();

    if ((val != 2) && (val != 1)) {
      $("#street").find('[value="1.B"]').remove();
    }
    else {
     if( $("#street option[value='1.B']").length == 0)
     {
       $("#street").append(new Option("Street B", "1.B"));
     }
    }
  });
});

它正在按预期工作。但是，当该选项被删除并稍后附加时，该选项将附加在末尾。有没有一种技术可以在删除之前存储索引，然后在追加期间存储索引，我可以在特定索引处追加？

场景:

1. 如果我首先选择伦敦选项，则 B 街将被删除。
2. 选择选项 2 莱斯特，B 街应附加。但应该保留索引。

Answer 1

您可以存储它的初始索引，当您需要将其添加回来时，添加 before() 当前位于该索引的选项

var $streetB = $("#street").find('[value="1.B"]'),
    streetBindex = $streetB.index();


$('#city').change(function() {
  var val = $(this).val();
  if ((val != 2) && (val != 1)) {
    $streetB = $("#street").find('[value="1.B"]').detach();
  } else {
    if ($("#street option[value='1.B']").length == 0) {
      $("#street option").eq(streetBindex).before($streetB.clone());
    }

  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>
Street:
<select id="street" name="street" size=10>
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>