HTML 使用函数来编写<options>表单内的选择

Question

所以我有一个非常复杂的表单，其中包含可能重复大约 300 次的相同选项的选择。 以下是一个非常精简的示例。

<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>

这样做显然是代码密集型的，并且不容易编辑。 是否可以创建一个函数来为我显示选择中的选项，以便我最终得到类似这两个选项？

<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>

我不确定它是否可能，我发现的任何研究都没有具体说明这个确切的问题或没有解决问题，所以我在这里。

Answer 1

恕我直言，您应该在渲染模板时在后端层执行此操作，但这里有一个前端解决方案：

 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>

Answer 2


  
 
  
  
   
    
        <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>

HTML 使用函数来编写<options>表单内的选择

问题描述

2 个解决方案

解决方案1
1 2020-02-17 14:00:40

解决方案2
0 2020-02-18 06:26:30

HTML 使用函数来编写<options>表单内的选择

问题描述

2 个解决方案

解决方案1 1 2020-02-17 14:00:40

解决方案2 0 2020-02-18 06:26:30

解决方案1
1 2020-02-17 14:00:40

解决方案2
0 2020-02-18 06:26:30