Auto populate select box using Javascript and jQuery

Question

I have a select box:

<select id="translationOptions" name="translationOptions"></select>

And I have a js array

var translationOptions = ["Egyptian Hieroglyphs", "Al Bhed (Final Fantasy X)", "Futurama"];

How would I auto populate the select box based on the var translationOptions?

Community · Accepted Answer · 2017-05-23 11:59:09Z

4

$.each(translationOptions, function(key, value) {   
    $('#mySelect')
         .append($("<option></option>")
         .attr("value",key)
         .text(value)); 
});

What is the best way to add options to a select from an array with jQuery?

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jun 3, 2012 at 17:15

Steve

3,0785 gold badges31 silver badges39 bronze badges

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

1 Comment

Jez Over a year ago

How could you pull the data from a couple of INPUT fields into the array to then feed into the above? I tried var translationOptions = ['$("input[name="inputboxname"]").val()']; but it just returns ['$("input[name="inputboxname"]").val()'] as the SELECT option

CD Smith · Accepted Answer · 2012-06-03 17:17:17Z

3

$.each(translationOptions, function(index, value) {
    $('#translationOptions').append($("<option />").val(index).text(value));
});

This uses text for display and index in the array for value.

edited Jun 3, 2012 at 17:17

CD Smith

6,6377 gold badges42 silver badges66 bronze badges

answered Jun 3, 2012 at 17:16

Porco

4,2033 gold badges25 silver badges25 bronze badges

Comments

Nishu Tayal · Accepted Answer · 2012-06-03 17:55:39Z

2

You can create options dynamically and append to select box in this way as well.

jQuery.each(translationOptions, function(key, value) {
    jQuery('<option/>', {
       'value': key,
       'text' : value
}).appendTo('#translationOptions');

answered Jun 3, 2012 at 17:55

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Collectives™ on Stack Overflow

Auto populate select box using Javascript and jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related