Javascript 在特定索引处追加select选项

我有两个选择下拉列表作为

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>

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

情景：

如果我首先选择Londra选项，则删除街道B

选择选项2莱斯特，应附加B街。但该指数应予以保留

---

改为在之前或之后使用：

$（函数（）{
$（'#city'）。更改（函数（）{
var val=$（this.val（）；
如果（（val！=2）和（&（val！=1））{
$（“#street”）.find（'[value=“1.B”]'）.remove（）；
}
否则{
如果（$（“#街道选项[value='1.B']”）。长度==0）
{
美元（“#street-c”）。之前（新选项（“street B”、“1.B”）；
}
}
});
});

选择城市
曼彻斯特
莱斯特
隆德拉
A街
B街
C街
D街
E街
F街
G街
H街
改用before或after：


$（函数（）{
$（'#city'）。更改（函数（）{
var val=$（this.val（）；
如果（（val！=2）和（&（val！=1））{
$（“#street”）.find（'[value=“1.B”]'）.remove（）；
}
否则{
如果（$（“#街道选项[value='1.B']”）。长度==0）
{
美元（“#street-c”）。之前（新选项（“street B”、“1.B”）；
}
}
});
});

选择城市
曼彻斯特
莱斯特
隆德拉
A街
B街
C街
D街
E街
F街
G街
H街
您可以存储它的初始索引，并在需要将其添加回时添加
before（）
当前位于该索引的选项


var$streetB=$（“#street”）.find（'[value=“1.B”]'），
streetBindex=$streetB.index（）；
$（'#city'）。更改（函数（）{
var val=$（this.val（）；
如果（（val！=2）和（&（val！=1））{
$streetB=$（“#street”）.find（'[value=“1.B”]'）.detach（）；
}否则{
如果（$（“#街道选项[value='1.B']”）。长度==0）{
$（“#street option”）.eq（streetBindex）.before（$streetB.clone（））；
}
}
});

城市：
选择城市
曼彻斯特
莱斯特
隆德拉
街道：
A街
B街
C街
D街
E街
F街
G街
H街
您可以存储它的初始索引，并在需要将其添加回时添加
before（）
当前位于该索引的选项


var$streetB=$（“#street”）.find（'[value=“1.B”]'），
streetBindex=$streetB.index（）；
$（'#city'）。更改（函数（）{
var val=$（this.val（）；
如果（（val！=2）和（&（val！=1））{
$streetB=$（“#street”）.find（'[value=“1.B”]'）.detach（）；
}否则{
如果（$（“#街道选项[value='1.B']”）。长度==0）{
$（“#street option”）.eq（streetBindex）.before（$streetB.clone（））；
}
}
});

城市：
选择城市
曼彻斯特
莱斯特
隆德拉
街道：
A街
B街
C街
D街
E街
F街
G街
H街
您可以使用jQuery提供的API，并在任何需要的位置追加


$（函数（）{
var currentIndex=$（“#街道选项[value='1.B']”）index（）；；
$（'#city'）。更改（函数（）{
var val=$（this.val（）；
如果（（val！=2）和（&（val！=1））{
$（“#street”）.find（'[value=“1.B”]'）.remove（）；
}否则{
如果（$（“#街道选项[value='1.B']”）。长度==0）{
美元（“#街道期权”）.eq（当前指数）。之前（新期权（“街道B”、“1.B”））；
}
}
});
});您可以使用jQuery提供的API并在任何所需位置追加


$（函数（）{
var currentIndex=$（“#街道选项[value='1.B']”）index（）；；
$（'#city'）。更改（函数（）{
var val=$（this.val（）；
如果（（val！=2）和（&（val！=1））{
$（“#street”）.find（'[value=“1.B”]'）.remove（）；
}否则{
如果（$（“#街道选项[value='1.B']”）。长度==0）{
美元（“#街道期权”）.eq（当前指数）。之前（新期权（“街道B”、“1.B”））；
}
}
});
});我正在寻找要保留的动态索引。我已经更新了上面的fiddle和代码。请看一看，虽然它已经被回答。我正在寻找动态索引被保留。我已经更新了小提琴和上面的代码。请看一下，虽然它已经被回答了。
$(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"));
     }
    }
  });
});