faqts : Computers : Programming : Languages : JavaScript : Forms : SELECT

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

69 of 78 people (88%) answered Yes
Recently 9 of 10 people (90%) answered Yes

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>