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

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小提琴演示.

我还建议添加一种确定的方法来识别哪些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小提琴演示.

参考文献:

• appendTo().
• closest().
• wrapAll().