Question

我无法使用Jquery replaceWith将选项标签替换为optgroup标签。

我到目前为止尝试的代码，

<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()方法，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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/

replaceWith不适用于optgroup的选项

2 个答案: