从下拉菜单中为选项分配值答案

【问题标题】：Assigning a value to an option from a dropdown menu从下拉菜单中为选项分配值
【发布时间】：2018-12-03 00:10:51
【问题描述】：

我正在制作一个收银机类型的程序。我已经通过在输入字段中输入并按下“添加”按钮将项目添加到下拉列表中。现在我正在尝试为我在下拉菜单中选择的项目赋予一个值。例如，我将“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>

【问题讨论】：

您是否尝试将价格指定为期权的value？
@ThomasByy 是的。
list.value = document.getElementById("productPrice").value;

标签： javascript html css

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

创建一个脚本，该脚本将获取被选中的选项，然后为其赋值。可以查看控制台查看是否赋值成功。

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 price = document.getElementById('productPrice').value;
  var product = document.querySelector('option:checked');
  product.value = price;
  console.log("Name of Product: "+product.innerHTML+"\n"+"Price: "+ product.value);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <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" onclick="addPrice()">
    </div>
  </body>
</html>

【讨论】：