Parse array into SELECT OPTIONS [duplicate]

Question

I have an array like this:

["News & Politics", "Personal Journals", "Society & Culture", "Technology", "Arts", "Natural Sciences", "Business", "Comedy", "History", "Tech News", "TV & Film", "Design", "Performing Arts", "Education", "Christianity", "Investing", "Sports & Recreation", "Professional", "Social Sciences", "Automotive", "Science & Medicine", "Management & Marketing", "Sexuality", "Philosophy", "Self-Help", "Literature", "Buddhism", "Places & Travel", "Music", "Language Courses", "Careers", "Food", "Kids & Family", "National"]

I need to "push" these values into a select with each of the items in the array being it's own option.

How do I go about accomplishing this?

The array is stored as variable all_cat_unique, but (of course) the following doesn't work. I just appends the entire array to the select a bunch of times.

$.each(obj.entry, function(i, data) {

    $('#all-categories').append('<option>'+all_cat_unique+'</option>');
});

Thanks.

@JoelAlmeida you are right, this seems to be duplicate of your posted question, mark as duplicate then.. — ameenulla0007
– ameenulla0007, Commented Feb 8, 2016 at 16:02
@cale_b Had to make one minor tweak to my code and your answer worked perfectly. Thanks. — jonmrich
– jonmrich, Commented Feb 8, 2016 at 16:02

Rishabh Rajgarhia · Accepted Answer · 2016-02-08 16:18:13Z

2

Given array:

var all_cat_unique = ["News & Politics", "Personal Journals", "Society & Culture", "Technology", "Arts", "Natural Sciences", "Business", "Comedy", "History", "Tech News", "TV & Film", "Design", "Performing Arts", "Education", "Christianity", "Investing", "Sports & Recreation", "Professional", "Social Sciences", "Automotive", "Science & Medicine", "Management & Marketing", "Sexuality", "Philosophy", "Self-Help", "Literature", "Buddhism", "Places & Travel", "Music", "Language Courses", "Careers", "Food", "Kids & Family", "National"];

HTML select:

<select id="all-categories"></select>

You can use the following code to dynamically append options from an array to a select:

for(var i = 0; i < all_cat_unique.length; i++)
$('#all-categories').append( $("<option></option>").attr("value",all_cat_unique[i]).text(all_cat_unique[i]) );

Here is working jsfiddle with your given array. Hope it helps

edited Feb 8, 2016 at 16:18

answered Feb 8, 2016 at 16:13

Rishabh Rajgarhia

7485 silver badges11 bronze badges

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

Comments

Magicprog.fr · Accepted Answer · 2016-02-08 16:08:07Z

var all_cat_unique = ["News & Politics", "Personal Journals", "Society & Culture", "Technology", "Arts", "Natural Sciences", "Business", "Comedy", "History", "Tech News", "TV & Film", "Design", "Performing Arts", "Education", "Christianity", "Investing", "Sports & Recreation", "Professional", "Social Sciences", "Automotive", "Science & Medicine", "Management & Marketing", "Sexuality", "Philosophy", "Self-Help", "Literature", "Buddhism", "Places & Travel", "Music", "Language Courses", "Careers", "Food", "Kids & Family", "National"];

$.each(all_cat_unique, function(i, data) {
    $('#all-categories').append('<option value="' + i + '">' + data + '</option>');
});

/*get value selected*/
$("#all-categories").on("change", function() {
    alert("Selected: " + all_cat_unique[this.value]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="all-categories"></select>

Kirill kilo-code Babkin · Accepted Answer · 2016-02-08 16:46:51Z

-1

good old for loop

var arr = ["News & Politics", "Personal Journals", "Society & Culture",     "Technology", "Arts", "Natural Sciences", "Business", "Comedy", "History", "Tech News", "TV & Film", "Design", "Performing Arts", "Education", "Christianity", "Investing", "Sports & Recreation", "Professional", "Social Sciences", "Automotive", "Science & Medicine", "Management & Marketing", "Sexuality", "Philosophy", "Self-Help", "Literature", "Buddhism", "Places & Travel", "Music", "Language Courses", "Careers", "Food", "Kids & Family", "National"];


for(var i =  0; i< arr.length;i++){

$('#all-categories').append('<option>'+arr[i]+'</option>');

}

edited Feb 8, 2016 at 16:46

answered Feb 8, 2016 at 16:11

Kirill kilo-code Babkin

3562 silver badges10 bronze badges

1 Comment

Kirill kilo-code Babkin Over a year ago

True, sorry missed it. Thank you.

OhBeWise · Accepted Answer · 2016-02-08 22:39:31Z

-2

Here you go.

$.each(obj.entry, function(i, data) {

    $('#all-categories').append('<option>'+data+'</option>');
});

i = is the index.

data = value.

https://jsfiddle.net/xqa7w557/

edited Feb 8, 2016 at 22:39

OhBeWise

5,4745 gold badges36 silver badges65 bronze badges

answered Feb 8, 2016 at 16:07

Adam

13 bronze badges

2 Comments

Adam Over a year ago

I posted my answer and hadn't even seen your comment. So I didn't actually see your answer. Thank you for the down vote though you. Nice that you did vote me down when all I was trying to do was help someone out. This site is suppose to be about helping and sharing knowledge.

random_user_name Over a year ago

I actually did not downvote. Your answer is correct, and I would not downvote out of frustration like that.

Collectives™ on Stack Overflow

Parse array into SELECT OPTIONS [duplicate]

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Linked

Related