I have a table, how do I call from it based on option select drop-downs?
Question
I have a table of pricing based on certain parameters, I'm familiar with the and tags at this point. 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
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 answers
solution1
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. 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() . 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:
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>
solution2
0 ACCPTED 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. Also, IDs need to be unique. 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. 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. The if-else part should be straight forward. In the getPrice function, i use a 3dimensional array. The first dimension is for the value in box1, the second for the value in box2 and the third for the value in 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. Also i extracted the code to get the value of a html-selection. If you have specific questions, feel free to ask.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.