HTML using a function to write the of a select inside a form

Question

So I have a very complex form that contains selects with the same options that repeat probably around 300 times. The following is a very slimmed down example of that.

<select name="HelmAtt1">
<option value=" | | ">Choose Here</option>
<option value="toughness_pts|implicit_toughness_pts_2|AttributeFlatInt">Toughness</option>
<option value="agility_pts|ar_agility_pts_1|AttributeFlatInt">Agility</option>
</select><input type="number" name="Ha1val" value="0"><br>

Doing it this way is obviously very code intensive and not easily editable. Is it possible to create a function that will display the options inside of a select for me, so I can end up with something like these two?

<select name="HelmAtt1">
printHTML();
</select><input type="number" name="Ha1val" value="0"><br>

<script>
function printHTML()
{
<option value=" | | ">Choose Here</option>
<option value="toughness_pts|implicit_toughness_pts_2|AttributeFlatInt">Toughness</option>
<option value="agility_pts|ar_agility_pts_1|AttributeFlatInt">Agility</option>
}
</script>

printHTML(HelmAtt1);
<input type="number" name="Ha1val" value="0"><br>

<script>
function printHTML(val)
{
<select name="val">
<option value=" | | ">Choose Here</option>
<option value="toughness_pts|implicit_toughness_pts_2|AttributeFlatInt">Toughness</option>
<option value="agility_pts|ar_agility_pts_1|AttributeFlatInt">Agility</option>
</select>
}
</script>

I'm not sure if its possible and any research I've found doesn't specify this exact problem or doesn't solve the issue so here I am.

Its using no framework. Its solely an html form that posts to a .php backend that handles the grunt work. It actually takes info thats inputted from the form and spits out a save file in .json based on that info. I come from a java background, so html not having easily accessible functions hurts my soul. — DigitalPrintZ, Feb 17 '20 at 13:23
I mean like why is it code intensive?, i'd like to use html instead. and btw you'd need extra ` — Animesh Sahu, Feb 17 '20 at 13:25
By the end of it, I would have around 300 selects containing around 50 of the same options. I could do it, but it would take a long time and would be impossible to actively edit the options as needed depending on changes to the affixes in the game. — DigitalPrintZ, Feb 17 '20 at 13:27
You'll never find a question about this exact problem; you'll need to find something about the general problem and apply it to your specific problem. — Heretic Monkey, Feb 17 '20 at 14:06
Does this answer your question? [Adding options to select with javascript](https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript) — Heretic Monkey, Feb 17 '20 at 14:06

score 1 · Answer 1 · answered Feb 17 '20 at 14:00

IMHO you should do that on the backend layer when you render your template, but here goes a frontend solution:

function addOptions(classname) {
  let elements = document.getElementsByClassName(classname);
  for (let i=0; i<elements.length; i++){
    let option = document.createElement('option');
    option.innerText = 'your option';
    option.value = 'your value';
    elements[i].appendChild(option);
  }
}

addOptions('foo');

Foo <select class="foo"></select>
Bar <select class="foo"></select>
Baz <select class="foo"></select>

Mahmoud Sabri · Answer 2 · 2020-02-18T06:33:09.147

0



    <html>
    <body>
    <select name="HelmAtt1" id="select">
    
    </select>
    
    <script>
    var html = '<option value="">default</option>';
    for (var i = 0; i<10; i++) 
    {
    html += '<option value="' + i + '"';
        
    html += '>' + i + '</option>';
       
    }
    
    document.getElementById('select').innerHTML=html;
    
    </script>
    
    </body>
    </html>

edited Feb 18 '20 at 06:33

answered Feb 18 '20 at 06:26

Mahmoud Sabri

713
1
7
22

HTML using a function to write the of a select inside a form

2 Answers2