JavaScript появляется вещь с определенным идентификатором, используя appendChild - PullRequest
Новая
       19

JavaScript появляется вещь с определенным идентификатором, используя appendChild

0 голосов
/ 17 мая 2018

Я не знаю, как это объяснить, я не хочу, чтобы это было неясно, поэтому, во-первых, я хочу показать этот HTML-код: 

<body>
  <form class="" action="index.html" method="post">
    <input type="num" onkeyup="addOptions()" name="member" id="member">
    <div id="selects">

    </div>
  </form>
</body>

И это код JavaScript: 

<script type="text/javascript">

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var inputValue = document.getElementById('member').value;
  for (var i = 0; i < inputValue; i++) {
    var select = document.createElement('select');
    var option = document.createElement('option');
    option.innerText = "Example";

    select.appendChild(option);
    document.getElementById('selects').appendChild(select);
  }
}
</script>

Итак, канавка этого кода будет, если я наберу num во входном num, выбор будет отображаться столько, сколько я набираю num. Но он просто запустит опцию выбора. Итак, мой вопрос: могу ли я показать, что опция в HTML-коде? Поэтому, когда я наберу num в текстовом поле, у меня появится что-то вроде этого, например: 

<option value="example" id="example">example</option>

Таким образом, код опции будет выполняться столько же, сколько и num, например, когда я наберу 3 в текстовом поле, я получу 3 кода, как показано выше.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Просто переместите несколько строк из цикла for следующим образом: 

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var inputValue = document.getElementById('member').value;
  var select = document.createElement('select');
  for (var i = 0; i < inputValue; i++) {
    var option = document.createElement('option');
    option.innerText = "Example "+i;
    select.appendChild(option);
  }
  document.getElementById('selects').appendChild(select);
}
<form class="" action="index.html" method="post">
  <input type="num" onkeyup="addOptions()" name="member" id="member">
  <div id="selects">

  </div>
</form>
0 голосов
/ 17 мая 2018

Если я правильно понял, в вашем коде есть некоторые проблемы. Я полагаю, что вы пытаетесь достичь раскрывающегося списка, используя select.

Внутри for цикла вы создаете select в каждой итерации, что, я думаю, вам не нужно. Чтобы сделать value, id доступными для только что созданного option, необходимо установить для этих свойств значение option.

Попробуйте следующее: 

function addOptions() {
  document.getElementById('selects').innerHTML = "";
  var select = document.createElement('select');
  var inputValue = Number(document.getElementById('member').value);
  for (var i = 0; i < inputValue; i++) {
    var option = document.createElement('option');
    option.innerText = "Example" + i;
    option.value = "example" + i;
    option.id = "example" + i;
    select.append(option);
  }
  if(select.innerHTML) // if at least one option then append select
    document.getElementById('selects').appendChild(select);
}
<input type="num" oninput="addOptions()" name="member" id="member"><br><br>
<div id="selects">

</div>
...