Reputation: 3238
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
Upvotes: 2
Views: 3300
Reputation: 1067
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));
});
Upvotes: 1
Reputation: 253506
I'd suggest:
$('#header1_cbocity option:gt(4)').wrapAll('<optgroup label="country" />')
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');
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));
});
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));
});
References:
Upvotes: 10