다른 옵션 태그 사이에서 옵션을 제거하고 추가 하시겠습니까?

Question

은 내가 옵션

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

을 추가 LIK 가정 해 봅시다, 옵션 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();