Question

我有一个基于某些参数的定价表，我现在熟悉和标签。我想知道根据三种不同下拉框选择的选择，调用平方英尺成本的最有效方法是什么。三个不同的框将与下面显示的代码一致。

<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厚度的Tempered Autumn Leaves，要求平方英尺成本为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属性，以便区分它们。我建议将'selection'默认为空字符串，并为其他选项提供唯一标识符。

然后，您需要确定在使用element.options[element.selectedIndex].value获取元素后，可以使用document.getElementById()选择哪个值。请记住，这需要在函数的里面完成，因为值会更新！

最后，检查三个值中没有一个是空字符串，这意味着它们已被选中。从这里开始，我只输出输入的值，但你可以做任何需要的计算。

您可能只想要Tempered / Annealed值的原始整数，但我已经使用字符串来显示以下示例中的输出更清晰：< / p>

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必须是唯一的。根据选择，选项可以采用的值也应该是唯一的。你在我的例子中看到了这一点。我的计算功能按表格提供的值打印结果。您可以扩展其他组合的计算功能。如您所见，第一个选择值对结果并不重要，第二个选择只能有一个值才能产生实际价格。

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

我有一个表，如何基于选项选择下拉菜单从中调用？

2 个答案: