Ввод текста создает параметры выбора

Question

Был в состоянии получить вход для создания вывода. Тем не менее, кажется, что текст, который вы вводите во входных данных, не отображается как раскрывающееся имя опции.

function addSku() {
  let tableRef = document.getElementById('sku_list');
  let newRow = tableRef.insertRow(-1);
  let newCell = newRow.insertCell(0);
  let newText = document.createTextNode(document.querySelector('#sku_input').value);
  var op = new Option();
  op.value = newText;
  op.text = newText;
  sku_dropdown.options.add(op);
  newCell.appendChild(newText);
}

document.getElementById('add_sku').onclick = addSku;

<form>
  <input required id="sku_input" type="text" placeholder="Sku #" />
  <input id="add_sku" name="add_sku" value="Add" type="button" />
</form>

<table>
  <tbody id="sku_list">
    <tr>
      <th>Sku</th>
    </tr>
  </tbody>
</table>
<form>
  <select id="sku_dropdown">
    <option disabled>Select Sku</option>
  </select>
</form>

https://jsfiddle.net/8pq7d5aw/2/

Answer 1

В вашем коде есть пара ошибок.

let newText = document.createTextNode( document.querySelector('#sku_input').value);
var op = new Option();
op.value = newText;
op.text = newText;

Выше вы создаете новый TextNode.Это на самом деле элемент HTML, поэтому вы не можете назначить его свойствам .value и .text .Вместо этого сделайте это следующим образом:

let newText = document.createTextNode( document.querySelector('#sku_input').value);
var op = new Option();
op.value = document.querySelector('#sku_input').value;
op.text = document.querySelector('#sku_input').value;

Наконец

sku_dropdown.options.add(op);

sku_dropdown не определен, поэтому получите фактический HTML-элемент, используя его идентификатор

document.getElementById('sku_dropdown').options.add(op); 

Answer 2

function addSku() {
  let tableRef = document.getElementById('sku_list');
  let newRow = tableRef.insertRow(-1);
  let newCell = newRow.insertCell(0);
  let newText = document.querySelector('#sku_input').value;
  var op = new Option();
  op.value = newText;
  op.text = newText;
  sku_dropdown.options.add(op);
  newCell.appendChild(document.createTextNode(newText));
 
}
console.log(document.getElementById('add_sku'))
document.getElementById('add_sku').addEventListener('click', addSku);

<form>
  <input required id="sku_input" type="text" placeholder="Sku #" />
  <input id="add_sku" name="add_sku" value="Add" type="button" />
</form>

<table>
  <tbody id="sku_list">
    <tr>
      <th>Sku</th>
    </tr>
  </tbody>
</table>
<form>
  <select id="sku_dropdown">
    <option disabled>Select Sku</option>
  </select>
</form>