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

Question

我正在尝试在选项 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);

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

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

Answer 1

这似乎可行，请参阅此 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();

Answer 2

我没注意到你要求更换。在那种情况下，您不会使用 insertBefore/insertAfter/or 追加。您只需使用 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>

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

Remove and add options in between other option tags?

jquery

select

options