gpt4 book ai didi

javascript - 我有一张表,如何根据选项选择下拉菜单从中调用?

转载 作者:行者123 更新时间:2023-11-28 01:58:10 27 4
gpt4 key购买 nike

我有一个基于特定参数的定价表,此时我熟悉 和 标签。我想知道根据三个不同的下拉框选择来计算平方英尺成本的最有效方法是什么。这三个不同的框与下面显示的代码类似。

<td> <select id="box1" oninput="calculate()">
<option value="0">Select Glass Pattern</option>
<option value="1">Autumn Leaves</option>
<option value="2">Treebark</option>
</select></td>

<td> <select id="box2" oninput="calculate()">
<option value="0">Select Glass Thickness</option>
<option value="4">5/32 (4mm)</option>
<option value="10">3/8 (10mm)</option>
</select></td>

<td> <select id="box3" oninput="calculate()">
<option value="0">Select Glass Type</option>
<option value="1">Tempered</option>
<option value="2">Annealed</option>
</select></td>

我怎样才能从下表中调用适当的成本?考虑到从下拉框中,我选择 5/32 厚度的钢化秋叶,要求平方英尺成本为 27 美元,而退火格式的成本为 17 美元

Select Glass    Select Thickness    Tempered or Annealed?   Cost
Autumn Leaves 5/32(4mm) Tempered $27.00
Autumn Leaves 5/32(4mm) Annealed $17.00
Treebark 5/32(4mm) Tempered $31.00
Treebark 5/32(4mm) Annealed $19.00

最佳答案

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titel</title>
</head>
<body>
<select id="box1" onchange="calculate()">
<option value="">Select Glass Pattern</option>
<option value="0">Autumn Leaves</option>
<option value="1">Treebark</option>
</select>
<br>
<select id="box2" onchange="calculate()">
<option value="">Select Glass Thickness</option>
<option value="0">5/32 (4mm)</option>
<option value="1">3/8 (10mm)</option>
</select>
<br>
<select id="box3" onchange="calculate()">
<option value="">Select Glass Type</option>
<option value="0">Tempered</option>
<option value="1">Annealed</option>
</select>
<div id="output">Please select all three values</div>
</div>
<script>

let calculate = () => {
let box1_selection = getValueById("box1");
let box2_selection = getValueById("box2");
let box3_selection = getValueById("box3");

if(box1_selection == "" || box2_selection == "" || box3_selection == "") {
document.getElementById("output").innerHTML = "Please select all three values";
} else {
let value = "not specified";

/*if(box2_selection == 0 && box3_selection == 0 {
value = "$27.00";
} else if(box2_selection == 0 && box3_selection == 1) {
value = "$17.00";
}*/
value = getPrice(box1_selection, box2_selection, box3_selection);

document.getElementById("output").innerHTML = value;
}
}

let getValueById = (id) => {
let selection = document.getElementById(id);
return selection.options[selection.selectedIndex].value;
}

let getPrice = (value_1, value_2, value_3) => {
// price_data is a 3 dimensional array.
let price_data = [
[
["$27.00", "$17.00"],
["not specified", "not specified"]
],
[
["$27.00", "$17.00"],
["not specified", "not specified"]
]
];
return price_data[value_1][value_2][value_3];
}
</script>
</body>
</html>

这解决了你的问题。您需要使用 onselect 而不是 oninput。此外,ID 需要是唯一的。每个选择,选项可以采用的值也应该是唯一的。你在我的例子中看到了这一点。我的计算函数根据您在表格中提供的值打印结果。您可以为其他组合扩展计算功能。如您所见,第一个选择值对结果并不重要,第二个选择只能有一个值才能产生实际价格。

编辑:在此版本中,您可以使用函数来计算价格,也可以使用 if-else 结构。 if-else 部分应该是直截了当的。在 getPrice 函数中,我使用了一个 3 维数组。第一个维度用于 box1 中的值,第二个维度用于 box2 中的值,第三个维度用于 box3 中的值。将这些维度视为图中的路径。如果您遵循这些路径,您将获得指定的价格。 if-else 部分也在那里,所以你可以使用任何你喜欢的东西。我还提取了代码以获取 html-selection 的值。如果您有具体问题,请随时提出。

关于javascript - 我有一张表,如何根据选项选择下拉菜单从中调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49500856/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com