他のオプションタグの間でオプションを削除して追加しますか？

Question

は、私はオプション

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

を追加するリク言わせて、オプション2の後にいくつかのオプション値を追加しようとしていると私はそれがなるとオプション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関数を組み込んでいますか？

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

Answer 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();