How do I clear all options in a dropdown box?

My code works in IE but breaks in Safari, Firefox, and Opera. (big surprise)

document.getElementById("DropList").options.length=0;

After searching, I've learned that it's the length=0 that it doesn't like. I've tried ...options=null and var clear=0; ...length=clear with the same result.

I am doing this to multiple objects at a time, so I am looking for some lightweight JS code.

You can use the following to clear all the elements.

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
  select.options[i] = null;
}

How do I clear all options in a dropdown box?, jQuery Practical Exercises with Solution: Remove all the options of a select box and then add one option and select it with jQuery. 1. Select the cell or range you want to delete the drop down list in, and click Data > Data Validation > Data Validation. See screenshot: 2. Then a dialog pops out, and click Clear All button in it, see screenshot: 3. Click OK button to close the dialog, and all drop down lists in the selection will be removed.

To remove the options of an HTML element of select, you can utilize the remove() method:

function removeOptions(selectElement) {
   var i, L = selectElement.options.length - 1;
   for(i = L; i >= 0; i--) {
      selectElement.remove(i);
   }
}

// using the function:
removeOptions(document.getElementById('DropList'));

It's important to remove the options backwards; as the remove() method rearranges the options collection. This way, it's guaranteed that the element to be removed still exists!

jQuery: Remove all the options of a select box and then add one , Clearing the entire dropdown list is pretty easy, all we have to do is to create a button, which calls a function that performs the deletion. Delete / Remove / Clear all items (Option) from DropDownList using jQuery The following HTML Markup consists of a DropDownList control and a Button. When the Button is clicked, the jQuery click event handler is executed.

If you wish to have a lightweight script, then go for jQuery. In jQuery, the solution for removing all options will be like:

$("#droplist").empty();

How to clear all options in a dropdown box?, Replace selectBox with the relevant id for the select box. If you wish to empty the select box and add a single option to the select box, use� If you'd like to remove all of your autofill suggestions, click on the "Tools" icon at the top right-hand side of your screen, then select "Internet Options" and pick the "Content" tab. Look for the AutoComplete section and click on "Settings." At the bottom of that section, there's an option to "Delete AutoComplete History."

Probably, not the cleanest solution, but it is definitely simpler than removing one-by-one:

document.getElementById("DropList").innerHTML = "";

How to remove all options within a Html select box using JQuery , It can be used to remove all `option` from a `select` element. In this post, we will see how to remove all options from a drop-down list with JavaScript and� var select = document.getElementById("DropList"); var length = select.options.length; for (i = 0; i < length;) { select.options[i] = null; length = select.options.length; } refresh the length and it will remove all the data from drop down list.

This is the best way :

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}

Remove all options from a drop-down with JavaScript and jQuery , You can use the following to clear all the elements. Note that var select = document.getElementById("DropList"); var length = select.options.length; for (i = 0 ;� The selected index will be -1 when u clear the dropdownlist its a property of the dropdownlist and obivous thing if u dont have item in the list then how can it be index 0. and list can be clear by Me.URDropdownlst.Items.Clear()

How do I clear all options in a dropdown box?, jQuery provides some interesting methods that would help remove or add items ( options) in the select element. You can either remove all the items or remove� Go to the worksheet or area of your current worksheet where your list items are, and then add or delete the desired item. 2. Select the cell that contains the drop-down list, then, in the Data menu

Add and Remove Multiple or Single Select Options using jQuery, These all appear to deselect the option, but my validation is finding some remnant of the selection having been made and allows submit. The only� Once I select any of the available options, I can't clear them out of the box. This is a problem if the user accidentally selected something, but really needs to leave the space blank. Delete and backspace won't work, and I'm basically stuck with a value once one has been selected.

How to reset select box after "selected" has been assign, Standard javascript function to clear all the options in an HTML select element // In this method, you provide the id of the select dropdown box�

Comments
  • To destroy all options (!?), and about reset the browser's history of selected options after refresh page, to use the HTML's <option selected>?? (google put us here but it is not here)... See document.getElementById("form1").reset() real solution.
  • MooTools also has empty(), so you would do $("DropList").empty();
  • This seems like a bad idea - setting the items to null is not the same as removing them.
  • It also dosen't work as excpected. When i use that code it leaves one object in dropdown.
  • This code might crash. The safest way to run the loop in reverse.
  • Check the other answers for a better way to do this.
  • cheers for that @Fabiano, this actually removes the items as opposed to other suggestions.
  • the key here is the backwards traversal of the selectbox.options I think....this solution failed when I tried forwards traversal
  • Yes, it will fail because the remove() method will rearrange the array. Doing it backwards will guarantee that the element to be removed will exist.
  • Adding selectbox.options.length = 0; in the end of definition might make it perfect in all browsers.
  • Simple code is while(selectEl.options.length) selectEl.options.remove(0)
  • I'd argue that the very act of adding jQuery is the opposite of "lightweight" when for (a in select.options) { select.options.remove(0); } does the work just fine.
  • It depends on the context. In a web application, the readability a hundred lines of $("#droplist").empty(); type code compared to thousands of lines of vanilla JS make it well worth the addition of jQuery. If we're talking markup/cosmetics for a simple webpage, you're 100% correct.