jQuery-- Populate select from json

Question

I have a map in my java sevlet and converting it to a json format that works right   When I do this function below it creates a drop down  but it puts every character as an option   This is what I got     document  ready function        var temp     temp          alert options       var  select       down                                 select find  option   remove                                    each temp  function key  value                              lt option gt    val key  text value  appendTo  select                      map content in JSON format    1     string   2     string

User · Answer

I just used the javascript console in Chrome to do this. I replaced some of your stuff with placeholders.

var temp= ['one', 'two', 'three']; //'${temp}';
//alert(options);
var $select = $('<select>'); //$('#down');                        
$select.find('option').remove();                          
$.each(temp, function(key, value) {              
    $('<option>').val(key).text(value).appendTo($select);
});
console.log($select.html());

Output:

<option value="0">one</option><option value="1">two</option><option value="2">three</option>

However it looks like your json is probably actually a string because the following will end up doing what you describe. So make your JSON actual JSON not a string.

var temp= "['one', 'two', 'three']"; //'${temp}';
//alert(options);
var $select = $('<select>'); //$('#down');                        
$select.find('option').remove();                          
$.each(temp, function(key, value) {              
    $('<option>').val(key).text(value).appendTo($select);
});
console.log($select.html());

User · Answer

fiddle  var  select       down      select find  option   remove        each temp function key  value          select append   lt option value     key     gt     value     lt  option gt

User · Answer

I believe this can help you     document  ready function        var temp    someKey  temp value   otherKey  other value   fooKey  some value        for  var key in temp            alert   lt option value     key     gt     temp key      lt  option gt

User · Answer

That work fine in Ajax call back to update select from JSON object  function UpdateList         var lsUrl     Url Action  Action    Controller            get lsUrl  function  opdata               each opdata  function  key  value                    myselect   append   lt option value     key     gt     value     lt  option gt

User · Answer

A solution is to create your own jquery plugin that take the json map and populate the select with it      function                  fn fillValues   function options             var settings     extend                datas   null                complete   null              options             this each  function                var datas   settings datas              if datas   null                      this  empty                    for var key in datas                         this  append   lt option value    key     gt   datas key    lt  option gt                                                 if   isFunction settings complete                    settings complete call this                                       jQuery      You can call it by doing this        select   fillValues  datas your map       The advantages is that anywhere you will face the same problem you just call              fillValues  datas your map       Et voila    You can add functions in your plugin as you like

User · Answer

I would do something like this     each temp function key  value          select append   lt option value     key     gt     value     lt  option gt           JSON structure would be appreciated  At first you can experiment with find  element   - it depends on JSON

User · Answer

Only change the DOM once     var listitems         each temp  function key  value       listitems      lt option value     key     gt     value     lt  option gt         select append listitems

User · Answer

JSON parse response   map function          return     lt option gt    val this value  text this label      appendTo   selectorId

[jquery] jQuery-- Populate select from json

Examples related to jquery