Adding Optgroups To Select Using Javascript Dynamically
I have a dynamically populated (by ajax) select box with resulting options like that:
Solution 1:
You can do this in place using jQuery:
$(document).ready(function() {
var select = $('#destination');
var opt1, opt2;
$('option', select).each(function(i) {
if (i % 2 === 0) {
opt1 = $(this);
} else {
opt2 = $(this);
var label = opt1.text().replace('London-', '');
var optgroup = $('<optgroup/>');
optgroup.attr('label', label);
opt2.add(opt1).wrapAll(optgroup);
}
});
});
This code iterates over all the options in the select tag, and wraps every set of two in an optgroup. It also figures out what to label the optgroup as, based on text in the options.
Solution 2:
This is not too tricky, you only need to move around your options a bit. Take them out of the document flow, add an optgroup in the place of the two associated options and append the options to that optgroup.
Assuming that the options are actually sequential, as in your example, a possible, good old DOM scripting implementation is as follows:
var destinationSelect = document.getElementById("destination");
var options = destinationSelect.getElementsByTagName("option");
var optgroups = [];
while(options.length > 0) {
var option1 = options[0];
var option2 = options[1];
var optgroup = document.createElement("optgroup");
var label = option1.innerHTML.replace(/^[^\-]-/, "");
optgroup.setAttribute("label", label);
destinationSelect.removeChild(option1);
destinationSelect.removeChild(option2);
optgroup.appendChild(option1);
optgroup.appendChild(option2);
optgroups.push(optgroup);
}
for(var i = 0; i < optgroups.length; i ++) {
destinationSelect.appendChild(optgroups[i]);
}
Post a Comment for "Adding Optgroups To Select Using Javascript Dynamically"