How do I add options to a DropDownList using jQuery

Question

As the question says  how do I add a new option to a DropDownList using jQuery   Thanks

User · Answer

Add item to list in the begining      ddlList   prepend   lt option selected  selected  value  0  gt  Select  lt  option gt       Add item to list in the end      lt option value  6  gt Java Script lt  option gt    appendTo   ddlList      Common Dropdown operation  Get  Set  Add  Remove  using jQuery

User · Answer

Without using any extra plugins   var myOptions         val1    text1       val2    text2     var mySelect       mySelect      each myOptions  function val  text        mySelect append              lt option gt  lt  option gt    val val  html text               If you had lots of options  or this code needed to be run very frequently  then you should look into using a DocumentFragment instead of modifying the DOM many times unnecessarily  For only a handful of options  I d say it s not worth it though   ------------------------------- Added --------------------------------  DocumentFragment is good option for speed enhancement  but we cannot create option element using document createElement  option   since IE6 and IE7 are not supporting it   What we can do is  create a new select element and then append all options  Once loop is finished  append it to actual DOM object   var myOptions         val1    text1       val2    text2     var  select       lt select gt       each myOptions  function val  text         select append                  lt option gt  lt  option gt    val val  html text                     mySelect   append  select html       This way we ll modify DOM for only one time

User · Answer

You may want to clear your DropDown first         DropDownQuality   empty     I had my controller in MVC return a select list with only one item       DropDownQuality   append              lt option gt  lt  option gt    val data 0  Value  html data 0  Text

User · Answer

I needed to add as many options to dropdowns as there were dropdowns on my page   So I used it in this way   function myAppender obj  value  text       obj append     lt option gt  lt  option gt    val value  html text         document  ready function         var counter   0      var builder   0         Get the number of dropdowns         id   ddlPosition      each function             counter                    Add the options for each dropdown         id   ddlPosition      each function             var myId   this id split      1               Add each option in a loop for the specific dropdown we are on         for  var i 0  i lt counter  i                  myAppender     id   ddlPosition   myId        i  i 1                         id   ddlPosition   myId       val builder           builder                  This dynamically set up dropdowns with values like 1 to n  and automatically selected the value for the order that dropdown was in  i e  2nd dropdown got  2  in the box  etc     It was ridiculous that I could not use this or this Object or   obj or anything like that in my 2nd  each    though --- I actually had to get the specific ID of that object and then grab and pass that whole object to my function before it would append   Fortunately the ID of my dropdown was separated by a     and I could grab it   I don t feel I should have had to  but it kept giving me jQuery exceptions otherwise   Something others struggling with what I was might enjoy knowing

User · Answer

U can use direct      ddlClassName   Html   lt option selected   selected   value   1   gt 1 lt  option gt  lt option value   2   gt 2 lt  option gt      -  Here u can use direct string

User · Answer

And also  use  prepend   to add the option to the start of the options list  http   api jquery com prepend

User · Answer

Without using any extra plugins   var myOptions         val1    text1       val2    text2     var mySelect       mySelect      each myOptions  function val  text        mySelect append              lt option gt  lt  option gt    val val  html text               If you had lots of options  or this code needed to be run very frequently  then you should look into using a DocumentFragment instead of modifying the DOM many times unnecessarily  For only a handful of options  I d say it s not worth it though   ------------------------------- Added --------------------------------  DocumentFragment is good option for speed enhancement  but we cannot create option element using document createElement  option   since IE6 and IE7 are not supporting it   What we can do is  create a new select element and then append all options  Once loop is finished  append it to actual DOM object   var myOptions         val1    text1       val2    text2     var  select       lt select gt       each myOptions  function val  text         select append                  lt option gt  lt  option gt    val val  html text                     mySelect   append  select html       This way we ll modify DOM for only one time

User · Answer

Without using any extra plugins   var myOptions         val1    text1       val2    text2     var mySelect       mySelect      each myOptions  function val  text        mySelect append              lt option gt  lt  option gt    val val  html text               If you had lots of options  or this code needed to be run very frequently  then you should look into using a DocumentFragment instead of modifying the DOM many times unnecessarily  For only a handful of options  I d say it s not worth it though   ------------------------------- Added --------------------------------  DocumentFragment is good option for speed enhancement  but we cannot create option element using document createElement  option   since IE6 and IE7 are not supporting it   What we can do is  create a new select element and then append all options  Once loop is finished  append it to actual DOM object   var myOptions         val1    text1       val2    text2     var  select       lt select gt       each myOptions  function val  text         select append                  lt option gt  lt  option gt    val val  html text                     mySelect   append  select html       This way we ll modify DOM for only one time

User · Answer

Lets think your response is  successData   This contains a list which you need to add as options in a dropdown menu    success  function  successData    var sizeOfData   successData length  if  sizeOfData    0              NO DATA  throw an alert         alert   No Data Found      else         each successData  function val  text            mySelect append                  lt option gt  lt  option gt    val val  html text                           This would work for you

User · Answer

Add item to list in the begining      ddlList   prepend   lt option selected  selected  value  0  gt  Select  lt  option gt       Add item to list in the end      lt option value  6  gt Java Script lt  option gt    appendTo   ddlList      Common Dropdown operation  Get  Set  Add  Remove  using jQuery

User · Answer

Without using any extra plugins   var myOptions         val1    text1       val2    text2     var mySelect       mySelect      each myOptions  function val  text        mySelect append              lt option gt  lt  option gt    val val  html text               If you had lots of options  or this code needed to be run very frequently  then you should look into using a DocumentFragment instead of modifying the DOM many times unnecessarily  For only a handful of options  I d say it s not worth it though   ------------------------------- Added --------------------------------  DocumentFragment is good option for speed enhancement  but we cannot create option element using document createElement  option   since IE6 and IE7 are not supporting it   What we can do is  create a new select element and then append all options  Once loop is finished  append it to actual DOM object   var myOptions         val1    text1       val2    text2     var  select       lt select gt       each myOptions  function val  text         select append                  lt option gt  lt  option gt    val val  html text                     mySelect   append  select html       This way we ll modify DOM for only one time

User · Answer

With the plugin  jQuery Selection Box  You can do this   var myOptions              Value 1     Text 1            Value 2     Text 2            Value 3     Text 3                myselect2   addOption myOptions  false

User · Answer

With no plug-ins  this can be easier without using as much jQuery  instead going slightly more old-school   var myOptions         val1    text1       val2    text2       each myOptions  function val  text            mySelect   append  new Option text val           If you want to specify whether or not the option a  is the default selected value  and b  should be selected now  you can pass in two more parameters       var defaultSelected   false      var nowSelected       true          mySelect   append  new Option text val defaultSelected nowSelected

User · Answer

With the plugin  jQuery Selection Box  You can do this   var myOptions              Value 1     Text 1            Value 2     Text 2            Value 3     Text 3                myselect2   addOption myOptions  false

User · Answer

try this Function    function addtoselect param value           mySelectBox   append   amp lt option value   value   amp gt   param   amp lt  option amp gt

User · Answer

With the plugin  jQuery Selection Box  You can do this   var myOptions              Value 1     Text 1            Value 2     Text 2            Value 3     Text 3                myselect2   addOption myOptions  false

User · Answer

using jquery you can use        this    select myid   append   lt option gt newvalue lt  option gt       where  myid  is the id of the dropdown list and newvalue is the text that you want to insert

User · Answer

With the plugin  jQuery Selection Box  You can do this   var myOptions              Value 1     Text 1            Value 2     Text 2            Value 3     Text 3                myselect2   addOption myOptions  false

User · Answer

try this Function    function addtoselect param value           mySelectBox   append   amp lt option value   value   amp gt   param   amp lt  option amp gt

User · Answer

using jquery you can use        this    select myid   append   lt option gt newvalue lt  option gt       where  myid  is the id of the dropdown list and newvalue is the text that you want to insert

User · Answer

With no plug-ins  this can be easier without using as much jQuery  instead going slightly more old-school   var myOptions         val1    text1       val2    text2       each myOptions  function val  text            mySelect   append  new Option text val           If you want to specify whether or not the option a  is the default selected value  and b  should be selected now  you can pass in two more parameters       var defaultSelected   false      var nowSelected       true          mySelect   append  new Option text val defaultSelected nowSelected

User · Answer

Pease note  Phrogz s solution doesn t work in IE 8 while  nickf s works in all major browsers  Another approach is     each myOptions  function val  text            mySelect   append     amp lt option  amp gt    attr  value   val  text text

User · Answer

I needed to add as many options to dropdowns as there were dropdowns on my page   So I used it in this way   function myAppender obj  value  text       obj append     lt option gt  lt  option gt    val value  html text         document  ready function         var counter   0      var builder   0         Get the number of dropdowns         id   ddlPosition      each function             counter                    Add the options for each dropdown         id   ddlPosition      each function             var myId   this id split      1               Add each option in a loop for the specific dropdown we are on         for  var i 0  i lt counter  i                  myAppender     id   ddlPosition   myId        i  i 1                         id   ddlPosition   myId       val builder           builder                  This dynamically set up dropdowns with values like 1 to n  and automatically selected the value for the order that dropdown was in  i e  2nd dropdown got  2  in the box  etc     It was ridiculous that I could not use this or this Object or   obj or anything like that in my 2nd  each    though --- I actually had to get the specific ID of that object and then grab and pass that whole object to my function before it would append   Fortunately the ID of my dropdown was separated by a     and I could grab it   I don t feel I should have had to  but it kept giving me jQuery exceptions otherwise   Something others struggling with what I was might enjoy knowing

User · Answer

You may want to clear your DropDown first         DropDownQuality   empty     I had my controller in MVC return a select list with only one item       DropDownQuality   append              lt option gt  lt  option gt    val data 0  Value  html data 0  Text

User · Answer

Lets think your response is  successData   This contains a list which you need to add as options in a dropdown menu    success  function  successData    var sizeOfData   successData length  if  sizeOfData    0              NO DATA  throw an alert         alert   No Data Found      else         each successData  function val  text            mySelect append                  lt option gt  lt  option gt    val val  html text                           This would work for you

User · Answer

U can use direct      ddlClassName   Html   lt option selected   selected   value   1   gt 1 lt  option gt  lt option value   2   gt 2 lt  option gt      -  Here u can use direct string

User · Answer

Pease note  Phrogz s solution doesn t work in IE 8 while  nickf s works in all major browsers  Another approach is     each myOptions  function val  text            mySelect   append     amp lt option  amp gt    attr  value   val  text text

User · Answer

And also  use  prepend   to add the option to the start of the options list  http   api jquery com prepend

[jquery] How do I add options to a DropDownList using jQuery?

Examples related to jquery

Examples related to user-interface

Examples related to drop-down-menu