通过jquery在动态代码中添加optgroup标签

这是我现在的选择框代码

     <select id="header1_cbocity">  
    <option  value="2">Ahmedabad</option>
    <option  value="4">Bangalore</option>
    <option  value="14">Chennai</option>
    <option  value="20">Delhi</option>
    <option  value="33">Gurgaon</option>
    <option  value="167">Switzerland</option>
    <option  value="261">Tanzania</option>
    <option  value="168">Thailand</option>
    <option  value="263">Uganda</option>
    <option  value="169">United Kingdom (U.K)</option>
    <option  value="170">United States (U.S)</option>
    </select>

艾哈迈达巴德
班加罗尔
钦奈
德里
古尔冈
瑞士
坦桑尼亚
泰国
乌干达
联合王国（联合王国）
美国

我只想为下面这样的国家添加optgroup标签

    <select id="header1_cbocity">  
        <option  value="2">Ahmedabad</option>
        <option  value="4">Bangalore</option>
        <option  value="14">Chennai</option>
        <option  value="20">Delhi</option>
        <option  value="33">Gurgaon</option>
    <optgroup label="Country">
        <option  value="167">Switzerland</option>
        <option  value="261">Tanzania</option>
        <option  value="168">Thailand</option>
        <option  value="263">Uganda</option>
        <option  value="169">United Kingdom (U.K)</option>
        <option  value="170">United States (U.S)</option>
    </optgroup>
    </select>

艾哈迈达巴德
班加罗尔
钦奈
德里
古尔冈
瑞士
坦桑尼亚
泰国
乌干达
联合王国（联合王国）
美国

我正在尝试使用jquery代码，但无法为国家/地区添加optgroup标签，因此我需要帮助

我建议：

$('#header1_cbocity option:gt(4)').wrapAll('<optgroup label="country" />')

（注意，我添加了

巴哈马

（以展示如何处理与非连续国家/国家的关系）

使用以下jQuery：

$('#header1_cbocity option.country')
    .wrapAll('<optgroup label="country" />')
    .closest('optgroup') // because otherwise wrapAll() returns the originally-found option elements
    .appendTo('#header1_cbocity');​

使用jQuery：

$('#header1_cbocity option').each(
    function(){
        var that = $(this),
            defn = that.attr('data-defn'),
            sel = that.closest('select'),
            optgroup = sel.find('optgroup.' + defn);
        if (!optgroup.length) {
            $('<optgroup />', {'class' : defn, 'label' : defn}).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + defn));
    });​

参考资料：

---

在不更改html的情况下使用David Thomas的答案

    $("#header1_cbocity option").each(function () {
        var optName = "Country";
        if ($(this).val() < 99) { return true; }
        var that = $(this);
        var sel = that.closest('select');
        var optgroup = sel.find('optgroup.' + optName);
        if (!optgroup.length) {
            $('<optgroup />', { 'class': optName, 'label': optName }).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + optName));
    });

第二个optgroup的完整代码

        if ($(this).val() == 20) {
            optName = "mmmmmmmmm";
        }

    $("#header1_cbocity option").each(function () {
        var optName = "Country";
        if ($(this).val() < 99) { return true; } //you might need to convert to int
        if ($(this).val() == 20) {
           optName = "Dehli";
        }
        var that = $(this);
        var sel = that.closest('select');
        var optgroup = sel.find('optgroup.' + optName);
        if (!optgroup.length) {
            $('<optgroup />', { 'class': optName, 'label': optName }).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + optName));
    });

$（“#header1_cbocity option”）。每个（函数（）{
var optName=“国家”；
如果（$（this.val（）<99）{return true；}//您可能需要转换为int
if（$（this）.val（）==20）{
optName=“Dehli”；
}
var，该值=$（此值）；
var sel=最近的（'select'）；
var optgroup=sel.find（'optgroup.'+optName）；
如果（！optgroup.length）{
$（''，{'class'：optName，'label'：optName}）；
}
appendTo（sel.find（'optgroup.'+optName））；
});

真的非常欢迎您，我很高兴能为您提供帮助！=）

    $("#header1_cbocity option").each(function () {
        var optName = "Country";
        if ($(this).val() < 99) { return true; }
        var that = $(this);
        var sel = that.closest('select');
        var optgroup = sel.find('optgroup.' + optName);
        if (!optgroup.length) {
            $('<optgroup />', { 'class': optName, 'label': optName }).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + optName));
    });

        if ($(this).val() == 20) {
            optName = "mmmmmmmmm";
        }

    $("#header1_cbocity option").each(function () {
        var optName = "Country";
        if ($(this).val() < 99) { return true; } //you might need to convert to int
        if ($(this).val() == 20) {
           optName = "Dehli";
        }
        var that = $(this);
        var sel = that.closest('select');
        var optgroup = sel.find('optgroup.' + optName);
        if (!optgroup.length) {
            $('<optgroup />', { 'class': optName, 'label': optName }).appendTo(sel);
        }
        that.appendTo(sel.find('optgroup.' + optName));
    });