Entry
Can I dynamically add/remove OPTGROUP elements to/from a SELECT box?
Jan 7th, 2003 07:59
Doug Schepers, Peter Korsten, Jim Ley
Here's a sample of how to play with dynamic optgroups (tested on IE6):
<html>
<head>
<script type='text/javascript'>
var fruitObj = new Object();
fruitObj['apple'] = 'crunchy';
fruitObj['pear'] = 'crunchy';
fruitObj['orange'] = 'squishy';
fruitObj['lemon'] = 'squishy';
fruitObj['lime'] = 'squishy';
fruitObj['banana'] = 'mushy';
function LoadFruits()
{
try
{
var fruitList = document.getElementById('Fruit');
var textureName = '';
for (var prop in fruitObj)
{
if (textureName != fruitObj[prop])
{
textureName = fruitObj[prop];
var textureGroup = document.createElement
('optgroup');
textureGroup.label = textureName;
fruitList.appendChild(textureGroup);
}
var fruitName = document.createElement('option');
fruitName.value = prop;
fruitName.innerText = prop;
textureGroup.appendChild(fruitName);
}
}
catch(er)
{
alert(er);
}
alert(document.all('Fruit').innerHTML)
};
function RemoveFruitTexture(texture)
{
try
{
var fruitList = document.getElementById('Fruit');
var eachGroup = fruitList.firstChild;
while (texture != eachGroup.label)
{
alert(eachGroup.label)
eachGroup = eachGroup.nextSibling;
}
fruitList.removeChild(eachGroup)
}
catch(er){}
}
function RemoveGroups()
{
try
{
var fruitList = document.getElementById('Fruit');
var initialLength = fruitList.length;
for (var o = 0; initialLength > o; o++)
{
var cloneOption = fruitList.options[o].cloneNode(true);
fruitList.appendChild(cloneOption);
}
var eachGroup = fruitList.firstChild;
while ('OPTGROUP' == eachGroup.tagName)
{
lastGroup = eachGroup;
eachGroup = lastGroup.nextSibling;
fruitList.removeChild(lastGroup)
}
}
catch(er){}
alert(document.all('Fruit').innerHTML)
}
</script>
</head>
<body>
<form id='foodForm'>
<select id='Fruit'> </select>
<br />
<input type='button' value='Show Fruits' onclick='LoadFruits()'>
<br />
<input type='button' value='No Squishy!'
onclick='RemoveFruitTexture("squishy")'>
<br />
<input type='button' value='Just Fruits!' onclick='RemoveGroups
()'>
</form>
</body>
</html>
