clearing select using jquery

Question

Is it possible to clear the contents of a html select object using JQuery   I have a function that gets a list to populate the select and appends it to the select  so I need some way of clearing the previous data before appending

User · Answer

Assuming a list like below - and assuming some of the options were selected ... (this is a multi select, but this will also work on a single select.

<select multiple='multiple' id='selectListName'> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option>
</select>

In some function called based on some event, the following code would clear all selected options.

$("#selectListName").prop('selectedIndex', -1);

User · Answer

use  empty        select   empty   append  whatever      you can also use  html   but note      When  html   is used to set an element s content  any content that was in that    element is completely replaced by the new content  Consider the following HTML    alternative   --- If you want only option elements to-be-remove  use  remove       select option   remove

User · Answer

You may have select option values such as  Choose option   If you want to keep that value and clear the rest of the values you can first remove all the values and append  Choose Option    lt select multiple  multiple  id  selectName  gt        lt option selected disabled gt Choose Option lt  option gt       lt option gt 1 lt  option gt        lt option gt 2 lt  option gt        lt option gt 3 lt  option gt       lt  select gt    Jquery      selectName option   remove       clear all values      selectName    append   lt option selected disabled gt Choose Option lt  option gt       append what you want to keep

User · Answer

option     theSelect   remove

User · Answer

If you don t care about any child elements  e g  optgroup  you can use empty          select   empty      Otherwise  if you only want option elements removed  use remove        select option   remove

User · Answer

For most of my select options  I start off with an option that simply says  Please Select  or something similar and that option is always disabled  Then whenever you want to clear your select option s you can do just do something like this   Example   lt select id  mySelectOption  gt      lt option value    selected disabled gt Please select lt  option gt   lt  select gt    Answer      mySelectOption   val  Please Select

User · Answer

Here is a small jQuery plugin that  among other things  can empty an dropdown list    Just write      your-select-element   selectUtils  setEmpty

[jquery] clearing select using jquery

Examples related to jquery