文章/答案/技术大牛

发布

社区首页 >问答首页 >我有一张桌子，我如何从它调用根据选择下拉选项？

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

Stack Overflow用户

提问于 2018-03-26 21:23:32

回答 2查看 46关注 0票数 0

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

<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的回火秋叶，要求25平方英尺的成本为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

html

css

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 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>

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

编辑:在这个版本中，您可以使用函数来计算价格，也可以使用if-else结构。如果-否则部分应该是直接前进。在getPrice函数中，我使用了一个三维数组。第一个维度用于box1中的值，第二个维度用于box2中的值，第三个维度用于box3中的值。将这些维度视为图中的路径。如果你沿着这些路走，你就会得到你的特价。如果-否则的部分也在那里，所以你可以使用任何你喜欢的。另外，我提取了代码以获得html选择的值。如果你有具体的问题，可以随便问。

票数 0

Stack Overflow用户

发布于 2018-03-26 21:45:12

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

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

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

您可能只需要原始的整数来表示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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49500856

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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