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元素，因此您不能将其分配给Option的 .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是未定义的，因此请使用其ID获取实际的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>

文字输入创建选择选项

2 个答案: