HTML использование функции для записи <options>выбора внутри формы - PullRequest
0 голосов
/ 17 февраля 2020

Итак, у меня есть очень сложная форма, которая содержит выборки с теми же параметрами, которые повторяются, вероятно, около 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>

Я не уверен, если это возможно и любое исследование, которое я обнаружил, не определяет эту точную проблему или не решает проблему, поэтому я здесь.

Ответы [ 2 ]

1 голос
/ 17 февраля 2020

ИМХО, вы должны сделать это на бэкэнд-слое при рендеринге вашего шаблона, но здесь идет фронтенд-решение:

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>
0 голосов
/ 18 февраля 2020
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...