Parse array into SELECT OPTIONS

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, Feb 08 '16 at 16:02
@cale_b Had to make one minor tweak to my code and your answer worked perfectly. Thanks. — jonmrich, Feb 08 '16 at 16:02

Rishabh Rajgarhia · Answer 1 · 2016-02-08T16:18:13.017

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

Magicprog.fr · Answer 2 · 2016-02-08T16:08:07.160

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 · Answer 3 · 2016-02-08T16:46:51.797

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>');

}

True, sorry missed it. Thank you. – Kirill kilo-code Babkin Feb 08 '16 at 16:46 — Kirill kilo-code Babkin, Feb 08 '16 at 16:46

score -2 · Answer 4 · edited Feb 08 '16 at 22:39

-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 08 '16 at 22:39

OhBeWise

5,350
3
32
60

answered Feb 08 '16 at 16:07

Adam

1
3

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. – Adam Feb 08 '16 at 20:45
I actually **did not** downvote. Your answer is correct, and I would not downvote out of frustration like that. – random_user_name Feb 08 '16 at 21:40

Parse array into SELECT OPTIONS

4 Answers4