HTML <select> with element list - html

Question

The following form works exactly as expected, and provides a dropdown list to select an option from:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<option value="captainAmerica">Captain America</option>
<option value="ironMan">Iron Man</option>
<option value="blackWidow">Black Widow</option>
<option value="thor">Thor</option>
</select>
What I am trying to do is this:
<select id="f-heroes" class="c-form-select__dropdown">
<option value=""><?echo getElement('hero');?></option>
</select>
This gets the 'hero' list but displays it below and out of the option window, and leaves me no option to select a value.
I may be missing something really simple here, but can't seem to get this to work, any help much appreciated.

Answer 1

It looks like your mixing PHP and JavaScript here. From my understanding of your question, you're wanting to create a loop that keeps creating 's for each of your superheroes.
If that's correct, you could use PHP and do something like the below:
<select id="f-heroes" class="c-form-select__dropdown">
<option value="" disabled selected>Heroes</option>
<?php
$superHeroes = array('Captain America','Iron Man','Black Widow','Thor');
$i = 0;
while ($i < count($superHeroes)) {
$name = $superHeroes[$i];
echo "<option value='".$name."'>".$name."</option>";
$i++;
}?>
</select>