Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Clear select box contents

Status
Not open for further replies.
firsttube

firsttube

Technical User
Apr 21, 2004
165
CA
I have a select box that I want to clear all the items out of...eg.

Code: 
<select name="selectbox" id="selectbox">
<option value="1">First</option>
<option value="2">Second</option>
</select><br>
<input type="button" onclick="clearbox();" value="Clear">

So now I have a function called "clearbox" that I want to make the selection box empty:

Code: 
funcion clearbox () {
obj = document.getElementById('selectbox');
obj.value='';
}

I know the function is not right. Any help?

thx

ft


Information is not Knowledge, Knowledge is not Wisdom, Wisdom is not Truth, Truth is not Beauty, Beauty is not Love, Love is not Music, Music is the best.
 
Sort by date Sort by votes
This code should do what you want. In the example I have used the form named myForm and the select was named mySelect...
Code: 
var formObj = document.forms['myForm']; // your form
for (var loop=0; loop < formObj.mySelect.options.length; loop++) {
  formObj.mySelect.options[loop] = null; // remove the option
}
Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for that!

But the problem is that it only clears the last option in the box. If there were four options it only clears number 4. Any ideas why? The loop looks like it would work..



Information is not Knowledge, Knowledge is not Wisdom, Wisdom is not Truth, Truth is not Beauty, Beauty is not Love, Love is not Music, Music is the best.
 
Upvote 0 Downvote
Jeff,

Would the following work just as well?

Code: 
var formObj = document.forms['myForm'];
forObj.mySelect.options.length = 0;

That's how I usually do it. I would guess it's cross-browser compatible, but I live in an IE world.... for better or for worse. :)

--Dave
 
Upvote 0 Downvote


var myList = window.document.myForm.mySelect;

/* Initialize the mySelect list box */
for(var count = myList.options.length - 1; count >= 0; count--)
{
myList.options[count] = null;
}
 
Upvote 0 Downvote
Yes. If you're going to loop through, then 4345487's loop works better. Once you remove the 0-index, the old 1-index option is now the 0-index option and, on the next loop, when the 1-index is removed, really the old-2-index will be removed, leaving the old-1-index in the new-0-index spot. Etc. Like 4345487 shows, you want to loop BACKWARDS through the options list to remove them.

--Dave
 
Upvote 0 Downvote
I have a select box that I want to clear all the items out of...eg.


CODE
<select name="selectbox" id="selectbox">
<option value="1">First</option>
<option value="2">Second</option>
</select><br>
<input type="button" onclick="clearbox();" value="Clear">

So now I have a function called "clearbox" that I want to make the selection box empty:


CODE
funcion clearbox () {
obj = document.getElementById('selectbox');
obj.value='';
}

I know the function is not right. Any help?

thx

ft

Information is not Knowledge, Knowledge is not Wisdom, Wisdom is not Truth, Truth is not Beauty, Beauty is not Love, Love is not Music, Music is the best.
Click to expand...

Ok, here's my version with comments. See if you like it any better or any worse.
Code: 
function clearbox()
{
   // Set select to the element "selectbox."
   var select=document.getElementById("selectbox");
   // Set options to an array of all "option" tags that
   // are children of the select element.
   var options=select.getElementsByTagName("option");
   var i;
   // Loop through the array of options and remove each
   // each one from the parent's childNode list.
   for (i=0; i<options.length; i++)
   {
      select.removeChild(options[i]);
   }// end for i
}// end clearbox
I hope I didn't forget anything...

 
Upvote 0 Downvote
Close, deputy. You need the backwards loop again (at least in IE).

Code: 
for (i=options.length-1; i>=0; i--)
...

--Dave
 
Upvote 0 Downvote
Dave, can you tell me what the backwards loop does? I've not used it in previous code for IE (or FF) and it has gotten rid of the "children."

Also, since removing a child node may not always remove the children of the child node, you may also add to my code:
for (i=0; i<options.length; i++)
{
options.removeChild(options.firstChild);
select.removeChild(options);
}// end for i

I don't build and remove HTML via javascript all that often, honestly. It is a nice feature, though. :)

 
Upvote 0 Downvote
I just tried your script in a simple test page with a 4-option select list and it removed the 1st and 3rd option only. The problem was that once the first option was removed, the second option became the first option. When the loop incremented and looked to remove the 2nd option, it removed the 3rd option (now in the 2nd option's old index). The 4th option now moved down to the second option's old index and when the loop incremented to remove the 3rd option, it found nothing.

Does this make sense?

When I looped backwards, it worked fine. When the last option is removed, the indeces of the other options remain unchanged.

Anyway, this is how it behaved in IE6.

--Dave
 
Upvote 0 Downvote
Thanks WorkingForInfo! Here's what worked for me:

Code: 
function clearbox() {
	var formObj = document.forms['test'];
	formObj.selectbox.options.length = 0;
	
}

and it appears to be cross-browser compatible...

thanks again!
ft

Information is not Knowledge, Knowledge is not Wisdom, Wisdom is not Truth, Truth is not Beauty, Beauty is not Love, Love is not Music, Music is the best.
 
Upvote 0 Downvote
Yes.... Dave is right. And yes, Dave, now that I think about it (and look at some of my code), I DID switch my loops to the reverse.

Ok, following Dave's instructions....
for (i=options.length-1; i>=0; i--)
{
select.removeChild(options);
}// end for i

The problem with my previous code is that it would remove index[0], and by removing it before the rest of the array, it would stop working correctly.
This fix, even though you have gotten a working version now, removes from the end of the array first, moving back towards the first index, which makes sure the array doesn't get logically screwed up.

Thanks, Dave. :)

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
796
coldbohemia
coldbohemia
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
902
malpa
malpa
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
332
chikwendu
chikwendu
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
596
berkshirea
berkshirea
waubain
  • Locked
  • Question
Save table contents results in empty array
Replies
7
Views
519
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top