2

这是我现在的选择框代码

     <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 标签，所以我需要帮助

4

2 回答 2

10

我建议：

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

JS 小提琴演示。

我还建议添加一个明确的方法来识别哪些option元素代表一个国家，在下面的演示中我使用了 a 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 小提琴演示。

此外，假设您已经放置了某种定义（在下面我使用自定义的, 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 小提琴演示。

当然，对于只指定那些具有data-defn属性的元素的选择器，您不一定需要为每个 option元素提供这样的属性：

$('#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 小提琴演示。

参考：

于 2012-10-08T11:15:23.030 回答
1

在不更改 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";
        }

带有第二个 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));
    });
于 2013-11-06T00:34:10.150 回答