Question

这是我现在的选择框代码

     <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代码，但无法为Country添加optgroup标签，所以我需要帮助

Answer 1

我建议：

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

JS Fiddle demo

我还建议添加明确的方法来确定哪些option元素代表一个国家/地区，在下面的演示中我使用了class，但是一个自定义data-*属性可以很容易地使用。鉴于加价：

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

（请注意，我添加了Bahamas（以显示如何处理非连续状态/国家/地区）。

使用以下jQuery：

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

JS Fiddle demo

此外，假设您已经放置了某种类型的定义（在下面我使用自定义data-defn属性），您可以创建optgroup元素来包含这些：

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

使用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));
    });

JS Fiddle demo

当然，使用仅指定具有data-defn属性的元素的选择器，您不一定需要为每个 option提供以下属性：< / p>

$('#header1_cbocity option[data-defn]').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));
    });

JS Fiddle demo

参考文献：

Answer 2

使用David Thomas的答案而不更改您的HTML

    $("#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";
        }

第二个optgroup的完整代码

    $("#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));
    });

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

2 个答案: