我有一張桌子，如何根據選項選擇下拉菜單從中調用它？

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