我有一张桌子，如何根据选项选择下拉菜单从中调用它？
[英]I have a table, how do I call from it based on option select drop-downs?
问题描述
I have a table of pricing based on certain parameters, I'm familiar with the and tags at this point. 
我有一个基于某些参数的定价表，目前我熟悉and标签。 I would like to know what is the most efficient way to call for a square foot cost based on the selections of three different drop down box selections. 我想知道基于三种不同的下拉框选择，最有效的方呎成本调用方法是什么。 The three different boxes would be something along the lines of what code is shown below. 这三个不同的框将类似于下面显示的代码。
<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>
How would I be able to call the appropriate cost from the table below? 我如何从下表中调用适当的费用？ Given that from the drop-down boxes, I select Tempered Autumn Leaves in 5/32 thickness, to call for the square foot Cost of 27$, versus getting 17$ for the annealed format 鉴于从下拉框中选择了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
2 个解决方案
解决方案1
0 2018-03-26 21:45:12
First, you'll want to give your various <option> elements different value attributes so you can distinguish them. 首先，您需要为各种<option>元素赋予不同的value属性，以便区分它们。 I'd recommend giving the 'selection' default an empty string, and unique identifiers for the other selections. 我建议给“选择”默认值一个空字符串，并为其他选择提供唯一的标识符。
Then you need to work out which value is selected, which can be done with element.options[element.selectedIndex].value , after the element has been obtained with document.getElementById() . 然后，您需要确定在选择了哪个值之后，可以通过document.getElementById()获得元素，然后使用element.options[element.selectedIndex].value进行选择。 Keep in mind this will need to be done inside of the function, as the value will update! 请记住，这将需要在函数内部完成，因为值将更新！
Finally, just check that none of the three values are an empty string, which will mean that they've been selected. 最后，只需检查三个值中没有一个是空字符串，这意味着它们已被选中。 From here, I've just outputted the entered values, but you can do whatever calculations you need. 从这里，我刚刚输出了输入的值，但是您可以执行所需的任何计算。
You'll probably only want raw integers for the Tempered / Annealed values, but I've gone with strings to showcase output clearer in the following example: 您可能只希望将原始整数用于Tempered / Annealed值，但是在以下示例中，我使用了字符串来展示更清晰的输出：
function calculate() { var box1 = document.getElementById("box1"); box1_value = box1.options[box1.selectedIndex].value; var box2 = document.getElementById("box2"); box2_value = box2.options[box2.selectedIndex].value; var box3 = document.getElementById("box3"); box3_value = box3.options[box3.selectedIndex].value; console.clear(); // Reset the output if (box1_value != "" && box2_value != "" && box3_value != "") { console.log(box1_value, box2_value, box3_value); } }
<td> <select id="box1" oninput="calculate()"> <option value="">Select Glass Pattern</option> <option value="Autumn Leaves">Autumn Leaves</option> <option value="Treebark">Treebark</option> </select> </td> <td> <select id="box2" oninput="calculate()"> <option value="">Select Glass Thickness</option> <option value="5/32 (4mm)">5/32 (4mm)</option> <option value="3/8 (10mm)">3/8 (10mm)</option> </select> </td> <td> <select id="box3" oninput="calculate()"> <option value="">Select Glass Type</option> <option value="Tempered - $27">Tempered</option> <option value="Annealed - $17">Annealed</option> </select> </td>
解决方案2
0 已采纳 2018-03-26 21:58:34
<!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>
This solves your question. 这解决了您的问题。 You need to use onselect and not oninput. 您需要使用onselect而不是oninput。 Also, IDs need to be unique. 另外，ID必须是唯一的。 Per selection, the values the options can take should be unique too. 对于每个选择，选项可以采用的值也应该是唯一的。 You see this in my example. 您在我的示例中看到了这一点。 My calculate function prints the result by the values you provided by your table. 我的calculate函数通过表提供的值打印结果。 You can extend the calculate function for other combinations. 您可以将计算功能扩展为其他组合。 As you see, the first selections value isn't important for the result and the second selection can only have one value to result in a real price. 如您所见，第一个选择值对于结果并不重要，第二个选择只能有一个值才能得出实际价格。
edit: In this version, you can use either the function to calculate the price, or the if-else construct. 编辑：在此版本中，您可以使用函数来计算价格，也可以使用if-else构造。 The if-else part should be straight forward. if-else部分应该很简单。 In the getPrice function, i use a 3dimensional array. 在getPrice函数中，我使用3维数组。 The first dimension is for the value in box1, the second for the value in box2 and the third for the value in box3. 第一个维度用于box1中的值，第二个维度用于box2中的值，第三个维度用于box3中的值。 See those dimensions as paths in a graph. 将这些尺寸视为图形中的路径。 If you follow those paths, you will get to your specifiedprice. 如果您遵循这些路径，您将获得指定的价格。 The if-else part is also there, so you can use whatever you like. if-else部分也在那里，因此您可以使用任何您喜欢的东西。 Also i extracted the code to get the value of a html-selection. 我也提取了代码以获得html选择的值。 If you have specific questions, feel free to ask. 如果您有特定问题，请随时提问。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.