在其他选项标签之间删除和添加选项？答案

【问题标题】：Remove and add options in between other option tags?在其他选项标签之间删除和添加选项？
【发布时间】：2018-04-16 09:31:58
【问题描述】：

我正在尝试在选项 2 之后添加一些选项值，假设我喜欢添加选项

<option value="2a">2a</option>
<option value="2b">2b</option>
<option value="2c">2c</option>

我喜欢删除选项 2

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
    </script>

    <select  id="selectCity">
    <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
    </select>

这样就变成了

    <select  id="selectCity">
    <option value="1">1</option>
 <option value="2a">2a</option>
    <option value="2b">2b</option>
    <option value="2c">2c</option>
<option value="3">3</option>
<option value="4">4</option>
    </select>

所以我尝试了

$("#selectCity option[value='2']").remove();

newoptions = '<option value="2a">2a</option><option value="2b">2b</option<option value="2c">2c</option>';
$("#selectCity").append(newoptions);

但这只是将选项值附加为最后一个选项，而不是第三个之前的选项

任何其他 jquery 内置函数我可以看看？？？

【问题讨论】：

标签： jquery select options

【解决方案1】：

我错过了您要求更换的消息。在这种情况下，您不会使用 insertBefore/insertAfter/或 append。您只需使用 replaceWith。

var replacement = [
  '<option value="2a">2a</option>',
  '<option value="2b">2b</option>',
  '<option value="2c">2c</option>'
];

$('#selectCity option').filter('[value="2"]').replaceWith(replacement);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectCity">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

【讨论】：

【解决方案2】：

这似乎可行，请参阅JSFiddle。

var elemToReplace = $("#selectCity option[value='2']");

newOptions = '<option value="2a">2a</option><option value="2b">2b</option><option value="2c">2c</option>';

$(newOptions).insertBefore(elemToReplace);

elemToReplace.remove();

【讨论】：