javascript - 为下拉菜单中的选项赋值

Question

我正在制作收银机类型的程序。我已经通过在输入字段中键入并按“添加”按钮来将元素添加到下拉列表中。现在我正在尝试为我在下拉菜单中选择的元素提供一个值。例如，我将“Apple”添加到列表中，从下拉菜单中选择它，在输入字段中输入价格，然后通过按下按钮将输入字段中的内容分配给“Apple”。这是我的进展情况:

function addProduct() {

    var list = document.createElement("OPTION");
    var name = document.getElementById("productName");

    list.innerHTML = name.value;
    name.value = "";

    document.getElementById("dropDown").appendChild(list);
}

<p>Add new product</p>
<input type="text" id="productName" placeholder="product name here">
<input type="button" id="btnAdd" value="Add Product" onclick="addProduct()">

<div>
    <p>Select a product then add the price per unit</p>
    <select id="dropDown"></select>
    <input type="text" id="productPrice" placeholder="price">
    <input type="button" value="Add Price" id="btnPrice" onlick="">
</div>

Answer 1

获取选中的选项，然后赋值给它的值。

function addProduct() {
  var list = document.createElement("OPTION");
  var name = document.getElementById("productName");
  list.innerHTML = name.value;
  name.value = "";
  document.getElementById("dropDown").appendChild(list);
}

function addPrice() {
  var name = document.getElementById("productName");
  var option = name.options[name.selectedIndex];
  var price = document.getElementById("productPrice").value;
  option.value = price;
}

<p>Add new product</p>
<input type="text" id="productName" placeholder="product name here">
<input type="button" id="btnAdd" value="Add Product" onclick="addProduct()">

<div>
  <p>Select a product then add the price per unit</p>
  <select id="dropDown"></select>
  <input type="text" id="productPrice" placeholder="price">
  <input type="button" value="Add Price" id="btnPrice" onlick="addPrice()">
</div>