JavaScript to clear a select list when it is dropped down

javascript remove options from select drop down
javascript remove option from select by value
javascript remove all options from select drop down
remove all options from select javascript
how to reset dropdown selected value in javascript
remove empty option from select javascript
javascript remove all items from select list
how to clear multi select dropdown in javascript

Is there a way to trigger an event when an HTML select list is dropped down? I'm not asking about when it closed, but when you first drop it down.

I'd like to set the selectedIndex = -1 when the user clicks on the down arrow of the drop-down.

Most websites begin their drop-down with a blank entry, or a dummy entry like "Select...". I'd like to just have the values themselves, and have the list clear itself whenever they click in.

This is what I started with, but it fires after they make a choice, which isn't what I want - I want only when the list drops down.

<select id="ddlMylist">
  <option value="10">Choice 1</option>
  <option value="20">Choice 2</option>
  <option value="30">Choice 3</option>
  <option value="40">Choice 4</option>
</select>


document.getElementById("ddlMylist").onclick = function(){
  //this clears the list when they click, but it fires when they
  //are making an actual choice, which isn't what I want
  document.getElementById("ddlMylist").selectedIndex=-1;
  }

This JSFiddle tries to use a click event, but of course that doesn't let the user actually make a choice.

This can be achieved via the mousedown event, which is fired when the user first initates the click on the <select> element:

// mousedown is fired when mouse click is first pressed down on
// the <select> element 
document
.getElementById("ddlMylist")
.addEventListener("mousedown", function(){ 
  
  // Resets selected option item
  document.getElementById("ddlMylist").selectedIndex = -1;
})
<select id="ddlMylist">
  <option value="10">Choice 1</option>
  <option value="20">Choice 2</option>
  <option value="30">Choice 3</option>
  <option value="40">Choice 4</option>
</select>

HTML DOM Select remove() Method, Example. Remove the selected option from the drop-down list: var x = document.​getElementById("mySelect"); x.remove(x.selectedIndex);. Try it Yourself »  Definition and Usage The remove () method is used to remove an option from a drop-down list. Tip: To add an option to a drop-down list, use the add () method.

Don't really understand your question but these three events will clear the select tag at different stages of the interaction with it.

document.getElementById("ddlMylist").addEventListener('focus', function(){
  document.getElementById("ddlMylist").selectedIndex=-1;
  });

document.getElementById("ddlMylist").addEventListener('blur', function(){
  document.getElementById("ddlMylist").selectedIndex=-1;
  });

document.getElementById("ddlMylist").addEventListener('change', function(){
  document.getElementById("ddlMylist").selectedIndex=-1;
  });

Remove all options from a drop-down with JavaScript and jQuery , It can be used to remove all <option> from a <select> element as shown below: JS; HTML. JS. Simple. The standard way to clear all the options is to simply set the options.lengthproperty to zero. That function is listed below, and is fast enough when there are not that many options in the drop-down list (a.k.a. select boxes). This method is also the most browser-compatible.

I modified @Dacre Denny's answer and got it to work in Firefox, Chrome, and Edge.

Link to JSFiddle.

var ClearOnClick = function(){
  document.getElementById("ddlMylist").selectedIndex = -1;
  StopListening();
};

function StopListening(){
  console.log("not listening...");
  document.getElementById("ddlMylist").removeEventListener("mousedown", ClearOnClick);
  document.getElementById("ddlMylist").addEventListener("change", StartListening);
}

function StartListening(){
  console.log("listening...");
  document.getElementById("ddlMylist").addEventListener("mousedown", ClearOnClick);
}
StartListening();

And, if you want to slap this behavior on all the select lists on a page, you can use this (JSFiddle). If anyone can see a good way to do this without calling eval() then I'm all ears.

  $("select").each(function () {
    /*
    every drop down list gets three functions - startlistening, clearonclick, and stoplistening.
    clearonclick is stored in a variable so that it can be unhooked
    Once everything is wired up, it should look like this -but repeated once for each drop down
    var ClearOnClick = function(){
      document.getElementById("ddlMylist").selectedIndex = -1;
      StopListening();
    };

    function StopListening(){
      document.getElementById("ddlMylist").removeEventListener("mousedown", ClearOnClick);
      document.getElementById("ddlMylist").addEventListener("change", StartListening);
    }

    function StartListening(){
      document.getElementById("ddlMylist").addEventListener("mousedown", ClearOnClick);
    }
    StartListening();
    */
    var controlName = this.id;
    //function names
    var cc_vname = "ClearOnClick_" + controlName;
    var sp_fname = "StopListening_" + controlName;
    var sl_fname = "StartListening_" + controlName;

    //full function bodies
    var clearOnClick_functionDeclaration = "var " + cc_vname + " = function(){document.getElementById('" + controlName + "').selectedIndex = -1;" + sp_fname + "();}";
    var stopListening_functionBody = "function " + sp_fname + "(){  document.getElementById('" + controlName + "').removeEventListener('mousedown', " + cc_vname + ");document.getElementById('" + controlName + "').addEventListener('change', " + sl_fname + ")}";
    var startListening_functionBody = "function " + sl_fname + "(){document.getElementById('" + controlName + "').addEventListener('mousedown', " + cc_vname + ");}";
    console.log(clearOnClick_functionDeclaration);
    console.log(stopListening_functionBody);
    console.log(startListening_functionBody);
    //create the functions for this drop down
    eval(clearOnClick_functionDeclaration);
    eval(stopListening_functionBody);
    eval(startListening_functionBody);

    //kick off by calling the start listening function
    console.log(sl_fname + "();");
    eval(sl_fname + "();");
  });

Remove an option from a drop down list with JavaScript and jQuery , remove() method will remove the specified elements out of the DOM. Using the jQuery's attribute selector, you can use any of the following methods to find the  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.

How to Clear the selected item in DropDownList in JavaScript (ES5 , By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element. How to remove options from a dropdown list with JavaScript? HTML Javascript Programming Scripts To remove options from a dropdown list, use the remove () method in JavaScript. You can try to run the following code to learn how to remove options from the drop-down −

Javascript Clear Select Options Fast, Standard javascript function to clear all the options in an HTML select element // In this Example of Removing Options From a Drop-Down List  Delete / Remove / Clear all items (Option) from DropDownList using JavaScript The following HTML Markup consists of a DropDownList control and a Button. When the Button is clicked, the DeleteAllValues JavaScript function is executed.

How to change selected value of a drop-down list using jQuery , easy to writing one line of code to change the selected value from a drop-down list. val() function: It sets or returns the value attribute of the selected elements. clear previous appended data on change the dropdown menu in JavaScript ? 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.

Comments
  • Possible duplicate of Is there a DOM event that fires when an HTML select element is closed?
  • Why would you want to clear the selection whenever a user clicks on a dropdown though? Sounds hella annoying/counter-intuitive to me.
  • @Jeto - this is a common design pattern in winforms apps, and the users in this case are accustomed to it. Personally I think it makes sense. If you are clicking the drop-down, then it seems logical to assume that you do not like the current selection, so putting you back at a "blank" state seems reasonable.
  • It's bad UX to me. I sometimes do this to check what the other options are/were, just to be sure, and would be very frustrated if that cleared my selection every time. I don't see the problem with the default behavior of dropdown lists. If that's how they behave, it's for a reason!
  • Doesn't work on last Firefox (guess mousedown is triggered on option selection). See the linked answer for more information. In short, there doesn't seem to be any reliable way to pull this off (no specific DOM event so you have to deal with every possible browser's way of handling the other, more generic events).
  • This is exactly what I wanted, but it does seem to be Chrome-only. Thank you very much.
  • @DacreDenny, I modified your example to make it work in all browsers. Thanks again!