Using jQuery to iterate through options in select element

Question

I've already seen other examples here on SO but none of them fit my problem.

I have a function that receives a select element, and I need it to spit out a JSON formatted string.

Example:

foo = buildOptionStructure($('.select-test'));

// Returns string of JSON formatted option data from select
// options in element.
function buildOptionStructure(selectElement) {
    options = "[";
    selectElement.find('option').each(function(option, i) {
        console.log(this); // Return my html in console.
        console.log(option); // Return a zero based index!
        console.log("I VALUE: " + option); // Returns same zero based index!
        options += "{";
        options += "name:'" + option.text() + "'";
        options += "},";
    });
    options += "]"

    return options;
}

I just need to build a string out of the options in the given select element. What am I missing here?

You're missing a quote in that code. You also aren't returning anything from your function. — James Montagne
– James Montagne, Commented Feb 22, 2014 at 23:51

Tomanow · Accepted Answer · 2014-02-22 23:57:05Z

2

function buildOptionStructure(selectElement) {
    var options = [];
    selectElement.find('option').each(function(k,v) {
        options.push({name: $(this).val()});        
    });
    return options
}

var foo = buildOptionStructure($('.select-test'));

console.log(foo);

To get the JSON string, you can use JSON.stringify(foo).

FIDDLE

answered Feb 22, 2014 at 23:57

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

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

3 Comments

random_user_name Over a year ago

Nice. He needs a json string though... how do you get the array into a json string?

random_user_name Over a year ago

I understand. I was suggesting you edit the question for the OP's benefit, not mine...

Tomanow Over a year ago

I added it to my answer as well. Thanks for the tip!

random_user_name · Accepted Answer · 2014-02-22 23:58:01Z

1

You're accessing the index when you attempt to use option.text() To access the text of the element, use this:

    options += "name:'" + $(this).text() + "'";

answered Feb 22, 2014 at 23:58

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Collectives™ on Stack Overflow

Using jQuery to iterate through options in select element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related