从下拉菜单为选项指定值
我正在制作一个收银机类型的程序。我已经通过在输入字段中键入并按下“添加”按钮，将项目添加到下拉列表中。现在我试图给我在下拉框中选择的项目一个值。例如，我将“苹果”添加到列表中，从下拉框中选择它，在输入字段中键入价格，然后通过按下按钮将输入字段中的内容分配给“苹果”。以下是我已经走了多远：
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>共有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>
获取所选选项，然后将其赋值为值。
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>-
我在Confluence上运行的HTML/CSS主题上实现了以下菜单。 默认情况下，我正在运行的主题提供了激活所有菜单项的下拉菜单的选项。但是，我希望只为其中一个菜单项显示下拉菜单。 该主题没有提供切换特定菜单项下拉列表的选项，这就是为什么我不得不求助于自定义CSS。 与发行说明菜单项对应的HTML如下-- 此外，添加以下自定义CSS将删除所有菜单项的下拉菜单。 我希望CSS有条件地不显示RELE
-
问题内容： 我正在一个涉及使用PHP脚本自动填充选择框的网站上工作。一切都很好，除了问题是我用来填充文本框的标题非常长（它们是期刊文章和演示文稿标题）。下拉框延伸到最长元素的宽度，该元素延伸超出屏幕边缘，因此使滚动条无法触及。我尝试了多种尝试使用CSS手动将下拉框设置为特定宽度的方法，但到目前为止都无济于事。我最好地完成了将“选择”框设置为特定宽度的操作，但是下拉菜单本身的宽度要大得多。 任何对此
-
问题内容： 我想知道是否有可能让jQuery 在下拉框中选择，例如第4个项目？ 我希望用户单击一个链接，然后让该框更改其值，就像用户通过单击来选择它一样。 问题答案： 怎么样 对于现代版本的jquery，应使用代替
-
问题内容： 我试图使用AngularJS创建一个链接/级联的下拉列表（选择元素），但是我很难用我的对象属性过滤和更新“ selected”属性。 首次加载页面时，所选项目将被过滤并正确显示在下拉菜单中。更改父级下拉菜单后，子级选择项不会抓住已过滤列表中的第一个项，导致子级下拉项不会更新。 任何见解将不胜感激，请注意，我将父/子/孙子数组分开（而不是在子数组中），因为最终我将从SQL中的单独spoc
-
我是使用selenium ide的新手。 我已经让我的代码的所有其他部分工作。 但是我目前有一个问题，让它在下拉菜单中选择一个选项。 我为下拉列表和
-
问题内容： 我有两个下拉菜单，其中的选项不是从数据库中获取的。 第一个，让用户选择一个类别。 第二个选项取决于第一个下拉菜单中的选择。例如，如果用户选择“ 第一个” 选项，则第二个下拉列表将显示 但是当用户改变主意，或先选择 第二个 选项时，第二个下拉列表现在将显示 我的问题是我该如何实现？不用数据库就可以做到吗？ 谢谢！ 问题答案： 参见下文，查看 不使用数据库 的 工作示例 。 使用MySQL