ansaurus

Question

How to display JSON data in a select box using jQuery?

Answer 1

+5 A:

Use $.each and iterate over all your elements. This should work:

$.each(jsonData, function(key, value)
{
   $('<option></option>').val(key).text(value).appendTo('#yourSelectList');
});

alexn 2010-02-21 16:38:04

Depending on the size of the data, many .append() operations can be expensive. It's much faster to create a placeholder array, and .push() each option onto it, then .append(myArray.join('')) only once.

MightyE 2010-02-21 16:47:19

This is wrong. What the heck is `this.code` and `this.name`? It doesn't work at all. Have no idea why this is getting up-voted.

patrick dw 2010-02-21 17:08:58

MightyE: that would only make any sense if we were talking about HTML strings. (And even then, jQuery's `append` function still has to append each DOM Node one-by-one, so you don't save anything by doing it like that.)

bobince 2010-02-21 17:13:59

@patrick You're completely right. Got a little to fast. Updated my answer.

alexn 2010-02-21 17:17:23

+1 for the corrections.

patrick dw 2010-02-21 17:30:33

Answer 2

+1 A:

Here's one way (takes fewer function calls):

var myJson = {"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria"};

$.each(myJson,function(key,val) {
    $('#mySelect').append('<option value="'+ key + '">' + val + '</option>');
});

patrick dw 2010-02-21 16:44:59

bobince 2010-02-21 17:17:43

@bobince - I see what you mean. Does calling `.val()` and `.text()` a sufficient avoidance of that issue?

patrick dw 2010-02-21 17:29:00

Yep. And `.attr()` for other cases.

bobince 2010-02-21 21:23:48

ansaurus

tags:

views:

answers:

How to display JSON data in a select box using jQuery?

related questions