Iterate a list and display in dropdown

Question

I have a list of Animal objects which have attributes name and code. I need to iterate this and display the results in a HTML select where the label has to be name and code has to be value.

Animal
{
  String name;
  String code;
}

I tried to work it out with javascript to push the values in to a select but to no avail. I tried doing the same with c:forEach as well. Does anyone have any idea or clue that can help? Below is the code I was trying to use:

<select id='animalList' multiple="multiple"></select>

var select = document.getElementById("animalList");  
var i = 0;
for (i = 1; i <= 5; i++) {  
  select.options[select.options.length] = new Option(i, i);    
}

See this question, https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — Subir Kumar Sao, Nov 02 '17 at 09:37
"_c:forEach_" you meant the JSTL here ? if not, why the `java` tag ? — AxelH, Nov 02 '17 at 09:45

score 1 · Answer 1 · answered Nov 02 '17 at 09:47

What kind of data will you list ? I assume it's an Array of Animal like this :

var animals = [
   {name : "animal1", code : 1},
   {name : "animal2", code : 2},
   {name : "animal3", code : 3}
 ]

And here is solution for this array

var select = document.getElementById("animalList");  

for(var i=0;i<=animals.length;i++)
{
  select.options[i] = new Option(animals[i].name,animals[i].code);  
}

jsfiddle: http://jsfiddle.net/dm1bpgp6/1/

Iterate a list and display in dropdown

1 Answers1