How can clear all options and optgroup of select?

Hi,

I want to clear a Select elements. I haven´t any proble with the options, but with the Optgroup I have a problem.

When the page loads, the select list fills with some values, that are grouped. The I have a button that change those values with it´s key, and then I refill the select with the new values. Here the Optgroup is repeated.... I don´t want to replace the select wqith a new elemnt, because I create this select at first time from a class with some characteristics and functions assigned.

So, how I can clear all the optgroup??

Thanks

Hugo
_JHL_Asked:
Who is Participating?
 
nabsolCommented:
Hi

This is the code from that link

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

That is a nice example if helps

By Nab
0
 
TimYatesCommented:
You mean remove the items from inside the select?

I don't get what you mean by "optgroup" :-(

If it is what I said, then:

   select.options.length = 0 ;

will clear them
0
 
nabsolCommented:
Hi

Hope this helps

To remove all:
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}



///////////Or ///////////

endSelect = document.getElementById('endSelect');
/* Clear out the current options */
for (i = 0; i < endSelect.options.length; i++) {
    endSelect.options[i] = null;
}


By Nab

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
nabsolCommented:
Hi

To remove only selected options

function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
if(selectbox.options[i].selected)
selectbox.remove(i);
}
}

By Nab
0
 
_JHL_Author Commented:
nasbol....
Thanks, I actually use that function to clear the options, but my problem comes with the optgroup, they don´t deleted.... I want to clear all inclusive the optgroup

Thanks...
0
 
nabsolCommented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.