replaceWith не работает для опции optgroup

Question

Я не могу заменить тег option на тег optgroup, используя JQuery replaceWith.

Код я пытался до сих пор,

<select id="SelectboxId"> 
    <option value="India">India</option> 
    <option value="Bombae">Bombae</option> 
    <option value="Chennai">Chennai</option> 
    <option value="US">US</option> 
    <option value="California">California</option> 
    <option value="Delaware">Delaware</option> 
</select> 

var oSrc = document.getElementById('SelectboxId') 
for (var i = 0; i < oSrc.options.length; i++) { 
    if (oSrc.options[i].text=="India" | oSrc.options[i].text=="US") { 
     $("#SelectboxId").find('option[value="India"]').replaceWith('<optgroup> India <optgroup/>'); 
     $("#SelectboxId").find('option[value="US"]').replaceWith('<optgroup> US <optgroup/>'); 
    } 
} 

Примечание: Существует способ <optgroup value="India">India</optgroup>, но я хочу сделать с помощью ReplaceWith динамически.

Скажите, где я ошибаюсь в своем коде?

Answer 1

Вы на самом деле ищете метод wrap().

Например:

$("#SelectboxId option[value='India']").wrap("<optgroup/>)"); 

---

Судя по ней, что вы на самом деле хотите сделать, чтобы сгруппировать государства из одной страны в <optgroup>.

Для этого сначала вам нужно указать, к какой стране принадлежит опция. Для этой цели вы можете использовать атрибут класса или данных. Затем вы можете использовать wrapAll() метод следующим образом:

$("#SelectboxId [data-group='india']").wrapAll("<optgroup label='India'/>"); 
 
$("#SelectboxId [data-group='US']").wrapAll("<optgroup label='US'/>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="SelectboxId"> 
 
    <option value="Bombae" data-group="india">Bombae</option> 
 
    <option value="Chennai" data-group="india">Chennai</option> 
 
    <option value="California" data-group="US">California</option> 
 
    <option value="Delaware" data-group="US">Delaware</option> 
 
</select>

Answer 2

Мое решение Jquery здесь идет

$("#SelectboxId > option").each(function() { 
    if (this.text=="India" || this.text=="US") { 
$("#SelectboxId").find('option[value="India"]').replaceWith('<optgroup> India </optgroup>'); 
$("#SelectboxId").find('option[value="US"]').replaceWith('<optgroup> US </optgroup>'); 
    } 
}); 

работает скрипку здесь, http://jsfiddle.net/raghuchandrasorab/ozmqt32s/