How can I use JSON data to populate the options of a select box

Question

I need to feed cities based on country of selection  I did it programmically but have no idea how to put JSON data into the select box  I tried several ways using jQuery  but none of them worked   The response I am getting  I can format this differently if necessary       lt option value  Woodland Hills  gt Woodland Hills lt   option gt     lt option value  none  gt none lt   option gt     lt option value  Los Angeles  gt Los Angeles lt   option gt     lt option value  Laguna Hills  gt Laguna Hills lt   option gt      But how can I put this data as options inside a HTML  lt select gt  lt  select gt  tag   The code I tried    lt form action    method  post  gt   lt input id  city  name  city  type  text  onkeyup  getResults this value    gt   lt input type  text  id  result  value     gt   lt select id  myselect  name  myselect   gt  lt option selected  selected  gt blank lt  option gt  lt  select gt   lt  form gt   lt  div gt    lt script gt  function getResults str        ajax           url  suggest html           type  POST           data   q     str          dataType   json           success  function  json                     myselect   append json                               suggest    keyup  function        getResults     this   val            lt  script gt    I also tried to use this tutorial on auto-populating select boxes using jQuery and AJAX  but this never did anything except filling my select with  UNDEFINED  for me even though I got the response in the format the tutorial suggested    lt script type  text javascript  charset  utf-8  gt    function         select city   change function          getJSON   select php   id    this  val    ajax   true    function j         var options             for  var i   0  i  lt  j length  i              options      lt option value      j i  optionValue      gt     j i  optionDisplay     lt  option gt                     select myselect   html options                   lt  script gt

User · Answer

You should do it like this   function getResults str        ajax           url  suggest html           type  POST           data   q     str          dataType   json           success  function  json                  each json  function i  optionHtml                     myselect   append optionHtml                                         Cheers

User · Answer

I know this question is a bit old  but I d use a jQuery template and a   ajax call   ASPX   lt select id  mySelect  name  mySelect gt       lt option value  0  gt -select- lt  option gt   lt  select gt   lt script id  mySelectTemplate  type  text x-jquery-tmpl  gt       lt option value    CityId   gt   CityName  lt  option gt   lt  script gt   JS    ajax        url  location pathname     GetCities        type   POST        contentType   application json  charset utf-8        dataType   json        success  function  response                 mySelectTemplate   tmpl response d  appendTo   mySelect                  In addition to the above you ll need a web method  GetCities  that returns a list of objects that include the data elements you re using in your template   I often use Entity Framework and my web method will call a manager class that is getting values from the database using linq   By doing that you can have your input save to the database and refreshing your select list is as simple as calling the databind in JS in the success of your save

User · Answer

Why not just make the server return the names     Woodland Hills    none    Los Angeles    Laguna Hills     Then create the  lt option gt  elements using JavaScript     ajax       url  suggest html       type  POST       data   q     str      dataType   json       success  function  json               each json  function i  value                    myselect   append     lt option gt    text value  attr  value   value

User · Answer

Take a look at JQuery view engine and just load the array into a dropdown      ajax       url  suggest html       type  POST       data   q     str      dataType   json       success  function  json                  Assumption is that API returned something like   North   West   South   East                  myselect   view json               See details here  https   jocapc github io jquery-view-engine docs ajax-dropdown

User · Answer

Given returned json from your   site com     text  Text1   val  Value1     text  Text2   val  Value2     text  Text3   val  Value3      Use this         getJSON  your   site com   function json                   select   empty                    select   append     lt option gt    text  Select                   each json  function i  obj                           select   append     lt option gt    text obj text  attr  value   obj val

User · Answer

zeusstl is right  it works for me too       lt select class  form-control select2  id  myselect  gt                         lt option disabled  disabled  selected gt  lt  option gt                         lt option gt Male lt  option gt                         lt option gt Female lt  option gt                       lt  select gt        getJSON  mysite json1 php   function json               myselect   empty                myselect   append     lt option gt    text  Select               each json  function i  obj          myselect   append     lt option gt    text obj text  attr  value   obj val

[javascript] How can I use JSON data to populate the options of a select box?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to json