CODEWITHSUNDEEP
javascriptjqueryselecteach
sthubbins
sthubbins

Reputation: 41

Dynamically generate select options from array of objects in jQuery

I'm trying to teach myself Javascript & jquery so am very new & bit rubbish so far. Im working on a little project in which I want to create a select list with the values created dynamically from an array of objects. This is a snippet of my objects:-

function to(name, seedGroup, seed, number) {
this.name = name;
this.seedGroup = seedGroup;
this.seed = seed;
}

var austria = new to("Austria", 3, 0);
var belgium = new to("Belgium", 1, 1);
var bosnia = new to("Bosnia & Herzogovinia", 2, 2);
var bulgaria = new to("Bulgaria", 4, 3);

I want the value to be the object & the text to be the object.name. I have tried many different ways to achieve this & have tied myslef up in knots. Any help would be appreciated.

Upvotes: 0

Views: 1834

Answers (1)

Stubbies
Stubbies

Reputation: 3114

Something like this http://codepen.io/anon/pen/gADam?

function to(name, seedGroup, seed, number) {
this.name = name;
this.seedGroup = seedGroup;
this.seed = seed;
}

var countries = [
  new to("Austria", 3, 0),
  new to("Belgium", 1, 1),
  new to("Bosnia & Herzogovinia", 2, 2)
];

var options = '';
for (var i = 0; i < countries.length; i++) {
   options += '<option value="'+JSON.stringify(countries[i])+'">'+countries[i].name+'</option>';
} 

$('select').html(options);

Upvotes: 1

Related Questions