How do you remove all the options of a select box and then add one option and select it with jQuery

Question

Using core jQuery  how do you remove all the options of a select box  then add one option and select it   My select box is the following    lt Select id  mySelect  size  9  gt   lt  Select gt    EDIT  The following code was helpful with chaining  However   in Internet nbsp Explorer   val  whatever   did not select the option that was added   I did use the same  value  in both  append and  val        mySelect   find  option   remove   end    append   lt option value  whatever  gt text lt  option gt    val  whatever      EDIT  Trying to get it to mimic this code  I use the following code whenever the page form is reset  This select box is populated by a set of radio buttons   focus   was closer  but the option did not appear selected like it does with  selected   true   Nothing is wrong with my existing code - I am just trying to learn jQuery   var mySelect   document getElementById  mySelect    mySelect options length   0  mySelect options 0    new Option   Foo  only choice     Foo    mySelect options 0  selected  true     EDIT  selected answer was close to what I needed  This worked for me       mySelect   children   remove   end    append   lt option selected value  whatever  gt text lt  option gt        But both answers led me to my final solution

User · Answer

save the option values to be appended in an object
clear existing options in the select tag
iterate the list object and append the contents to the intended select tag

_x000D_

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};_x000D_
_x000D_
$('#selectID').empty();_x000D_
_x000D_
$.each(listToAppend, function(val, text) {_x000D_
    $('#selectID').append( new Option(text,val) );_x000D_
  });

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_x000D_

User · Answer

Try mySelect innerHTML     lt option selected value  quot whatever quot  gt text lt  option gt     x000D   x000D  function setOne       console log  mySelect      mySelect innerHTML     lt option selected value  whatever  gt text lt  option gt      x000D   lt button onclick  setOne     gt set one lt  button gt   lt Select id  mySelect  size  9  gt     lt option value  1  gt old1 lt  option gt    lt option value  2  gt old2 lt  option gt    lt option value  3  gt old3 lt  option gt   lt  Select gt  x000D   x000D   x000D

User · Answer

Not sure exactly what you mean by  add one and select it   since it will be selected by default anyway  But  if you were to add more than one  it would make more sense  How about something like      select   children   remove       select   append   lt option id  foo  gt foo lt  option gt         foo   focus      Response to  EDIT   Can you clarify what you mean by  This select box is populated by a set of radio buttons   A  lt select gt  element cannot  legally  contain  lt input type  radio  gt  elements

User · Answer

Thanks to the answers I received  I was able to create something like the following  which suits my needs  My question was somewhat ambiguous  Thanks for following up  My final problem was solved by including  selected  in the option that I wanted selected    x000D   x000D    function     x000D        mySelect   children   remove   end   append   lt option selected value  One  gt One option lt  option gt         clear the select box  then add one option which is selected x000D       input name  myRadio     filter    value  1      attr   checked    checked        select radio button with value 1 x000D       Bind click event to each radio button  x000D       input name  myRadio     bind  click   x000D                                    function     x000D      switch this value    x000D        case  1   x000D              mySelect   find  option   remove   end   append   lt option selected value  One  gt One option lt  option gt      x000D          break   x000D        case  2   x000D              mySelect   find  option   remove     x000D          var items     Item1    Item2    Item3        Set locally for demo x000D          var options        x000D          for  var i   0  i  lt  items length  i      x000D            if  i  0    x000D              options      lt option selected value      items i       gt     items i      lt  option gt    x000D              x000D            else   x000D              options      lt option value      items i       gt     items i      lt  option gt    x000D              x000D            x000D              mySelect   html options        Populate select box with array x000D          break   x000D           Switch end x000D         Bind function end x000D                                         bind end x000D         Event listener end x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt label gt One lt input  name  myRadio  type  radio  value  1     gt  lt  label gt  x000D   lt label gt Two lt input name  myRadio   type  radio  value  2    gt  lt  label gt  x000D   lt select id  mySelect  size  9  gt  lt  select gt  x000D   x000D   x000D

User · Answer

control   html   lt option selected   selected   gt The Option    lt  option gt

User · Answer

Another way       select   empty   append     lt option gt    text  ---------   attr  value          Under this link  there are good practices https   api jquery com select

User · Answer

why not just use plain javascript   document getElementById  selectID   options length   0

User · Answer

Building on mauretto s answer  this is a little easier to read and understand       mySelect   find  option   not   first   remove      To remove all the options except one with a specific value  you can use this       mySelect   find  option   not   value 123    remove      This would be better if the option to be added was already there

User · Answer

Hope it will work      myselect   find  option   remove    append     lt option gt  lt  option gt    val  value1   html  option1

User · Answer

var select       mySelect    select find  option   remove   end    append     lt option  gt    val     text  Select     var data      id  1  title   Option one      id  2  title   Option two     for var i in data        var d   data i       var option       lt option  gt    val d id  text d title       select append option     select val

User · Answer

mySelect        find  option        remove        end        append   lt option value  whatever  gt text lt  option gt         val  whatever

User · Answer

I had a bug in IE7  works fine in IE6  where using the above jQuery methods would clear the select in the DOM but not on screen  Using the IE Developer Toolbar I could confirm that the select had been cleared and had the new items  but visually the select still showed the old items - even though you could not select them   The fix was to use standard DOM methods properites  as the poster original had  to clear rather than jQuery - still using jQuery to add options       mySelect   0  options length   0

User · Answer

Just one line to remove all options from the select tag and after you can add any options then make second line to add options       ddlsl   empty         ddlsl   append new Option  Select all    all       One more short way but didn t tried      ddlsl   empty   append new Option  Select all    all

User · Answer

Uses the jquery prop   to clear the selected option      mySelect option selected   prop  selected   false

User · Answer

I ve found on the net something like below  With a thousands of options like in my situation this is a lot faster than  empty   or  find   remove   from jQuery   var ClearOptionsFast   function id        var selectObj   document getElementById id       var selectParentNode   selectObj parentNode      var newSelectObj   selectObj cloneNode false      Make a shallow copy     selectParentNode replaceChild newSelectObj  selectObj       return newSelectObj      More info here

User · Answer

How about just changing the html to new data       mySelect   html   lt option value  whatever  gt text lt  option gt       Another example       mySelect   html        lt option value  1  selected gt text1 lt  option gt       lt option value  2  gt text2 lt  option gt       lt option value  3  disabled gt text3 lt  option gt

User · Answer

First clear all exisiting option execpt the first one --Select--  Append new option values using loop one by one      ddlCustomer   find  option not  first    remove    for  var i   0  i  lt  oResult length  i             ddlCustomer   append new Option oResult i  CustomerName  oResult i  CustomerID         oResult i  ID

User · Answer

This will replace your existing mySelect with a new mySelect       mySelect   replaceWith   lt Select id  mySelect  size  9  gt      lt option value  whatever  selected  selected   gt text lt  option gt      lt  Select gt

User · Answer

mySelect        empty        append   lt option selected  selected  value  whatever  gt text lt  option gt

User · Answer

I saw this code in Select2 -  Clearing Selections      mySelect   val null  trigger  change      This code works well with jQuery even without Select2

User · Answer

You can do simply by replacing html      mySelect    html   lt option value  whatever  selected gt text lt  option gt     trigger  change

User · Answer

If your goal is to remove all the options from the select except the first one  typically the  Please pick an item  option  you could use       mySelect   find  option not  first    remove

User · Answer

id option   remove        id   append   lt option value  testValue   gt TestText lt  option gt       The first line of code will remove all the options of a select box as no option find criteria has been mentioned   The second line of code will add the Option with the specified value  testValue   and Text  TestText

User · Answer

mySelect        empty        append   lt option value  whatever  gt text lt  option gt         find  option first        attr  selected   selected

[javascript] How do you remove all the options of a select box and then add one option and select it with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html-select

Examples related to option

Examples related to dynamic-html