jonmrich February 2016

Parse array into SELECT OPTIONS

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.

Answers


Magicprog.fr February 2016

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>


Adam February 2016

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/


Kirill kilo-code Babkin February 2016

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

}


Rishabh Rajgarhia February 2016

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

Post Status

Asked in February 2016
Viewed 1,529 times
Voted 12
Answered 4 times

Search




Leave an answer