Add optgroup label in dyanamic code by jquery

Question

This is my select box code now

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

and i want to add optgroup label only for country like below

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

i am trying with jquery code but couldn't add optgroup label for Country, so i need help

Answer 1

Using David Thomas's answer without changing your 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));
    });

I Added below condition for myself to create a 2nd optgroup

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

Full Code with 2nd 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));
    });

Answer 2

I'd suggest:

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

JS Fiddle demo.

I'd also suggest adding a definitive means to identify which option elements represent a country, in the demo below I've used a class, but a custom data-* attribute could just as easily be used. Given the markup:

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

(Note that I've added Bahamas (in order to show how to handle dealing with non-consecutive states/countries).

With the following 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.

Further, assuming that you've placed a definition of some kind (in the following I use a custom, data-defn, attribute) you can create optgroup elements to encompass those:

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

With the 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.

Of course, with a selector that specifies only those elements with a data-defn attribute, you don't necessarily need to supply every option with such an attribute:

$('#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.

References:

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