我有一张桌子，如何根据选项选择下拉菜单从中调用它？

Question

我有一个基于某些参数的定价表，目前我熟悉and标签。 我想知道基于三种不同的下拉框选择，最有效的方呎成本调用方法是什么。 这三个不同的框将类似于下面显示的代码。

<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

Answer 1

首先，您需要为各种<option>元素赋予不同的value属性，以便区分它们。 我建议给“选择”默认值一个空字符串，并为其他选择提供唯一的标识符。

然后，您需要确定在选择了哪个值之后，可以通过document.getElementById()获得元素，然后使用element.options[element.selectedIndex].value进行选择。 请记住，这将需要在函数内部完成，因为值将更新！

最后，只需检查三个值中没有一个是空字符串，这意味着它们已被选中。 从这里，我刚刚输出了输入的值，但是您可以执行所需的任何计算。

您可能只希望将原始整数用于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>

Answer 2

<!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必须是唯一的。 对于每个选择，选项可以采用的值也应该是唯一的。 您在我的示例中看到了这一点。 我的calculate函数通过表提供的值打印结果。 您可以将计算功能扩展为其他组合。 如您所见，第一个选择值对于结果并不重要，第二个选择只能有一个值才能得出实际价格。

编辑：在此版本中，您可以使用函数来计算价格，也可以使用if-else构造。 if-else部分应该很简单。 在getPrice函数中，我使用3维数组。 第一个维度用于box1中的值，第二个维度用于box2中的值，第三个维度用于box3中的值。 将这些尺寸视为图形中的路径。 如果您遵循这些路径，您将获得指定的价格。 if-else部分也在那里，因此您可以使用任何您喜欢的东西。 我也提取了代码以获得html选择的值。 如果您有特定问题，请随时提问。

我有一张桌子，如何根据选项选择下拉菜单从中调用它？

问题描述

2 个解决方案

解决方案1
0 2018-03-26 21:45:12

解决方案2
0 已采纳 2018-03-26 21:58:34

我有一张桌子，如何根据选项选择下拉菜单从中调用它？

问题描述

2 个解决方案

解决方案1 0 2018-03-26 21:45:12

解决方案2 0 已采纳 2018-03-26 21:58:34

解决方案1
0 2018-03-26 21:45:12

解决方案2
0 已采纳 2018-03-26 21:58:34