Convert select list to JSON using jQuery

Question

How can I get the .val()'s and .html()'s of all the options from a multiple select list into a json object? Preferably using jQuery.

Thanks in advance!

A little more info:

I am using two multiple select boxes. Selecting items on the left box and moving them to the right. Once they have all the items they want selected they will push submit and it will take all the items in the right select box and move them to a main list.

Here is the code I am using once I get the JSON object:

datalistObject = JSON.parse(response);
if (datalistObject.length){
    $(".data-list tbody").empty();
    for (var i=0; i < datalistObject.length; i++) {
        var newrow = "<tr><td><input type='checkbox' name='user_id' value='" + datalistObject[i][0] + "' class='data-list-check'></td><td>" + datalistObject[i][1] + "</td></tr>";
        $(newrow).appendTo($(".data-list tbody"));
    }
}

Example html and output would be:

<select name="selecteditems">
    <option value="op1">Option 1</option>
    <option value="op2">Option 2</option>
    <option value="op3">Option 3</option>
</select>

[
    ["op1","Option 1"],
    ["op2","Option 2"],
    ["op3","Option 3"]
]

Why do you need it in a JSON object? If you give a little more information as to what you are trying to achieve, it will get you better answers. — Lazarus
– Lazarus, Commented Dec 1, 2010 at 17:19

karim79 · Accepted Answer · 2010-12-02 07:35:16Z

14

Something like this?

var items = $("#select > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {
        alert(key + ': ' + items[i][key]);   
    }
}

Demo: http://jsfiddle.net/eNGUL/

EDIT: To get a structure like your example data:

var items = $("#select > option").map(function() {
    var arr = [];
    arr.push([$(this).val(), $(this).text()]);
    return arr;
}).get();
for(var i = 0; i < items.length; i++) {
    alert(items[i]);
}

Demo: http://jsfiddle.net/karim79/eNGUL/2/

See .map.

edited Dec 2, 2010 at 7:35

answered Dec 1, 2010 at 17:21

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RandyLahey Over a year ago

Can you explain this a little bit? I've never used the map method. How could I get the output that I specified above? Thanks!

karim79 Over a year ago

@RandyLahey - I've edited my answer. If you read the doc page for .map and look at the examples I think you'll get it, it is fairly straightforward.

Collectives™ on Stack Overflow

Convert select list to JSON using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related