Inquiring about how to retrieve data from a table using option select drop-downs

Question

Inquiring about how to retrieve data from a table using option select drop-downs

I have a pricing table that is dependent on specific criteria, and I am familiar with using HTML tags for this purpose. I am interested in finding the most efficient way to retrieve the cost per square foot based on three dropdown box selections. These selections would be similar to the code snippet provided 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>

I am seeking guidance on how to efficiently retrieve the cost from the given table. For example, if I select Tempered Autumn Leaves in 5/32 thickness from the dropdown boxes, I want to be able to retrieve the square foot cost of $27, whereas I would get $17 for the annealed option.

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

javascript html css

Answer 1

Answer №1

<!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 addresses your query. Remember to use onselect instead of oninput and ensure that IDs are unique. Each selection should have unique values for options. Check out the example above to see the calculation based on the values provided in your table. You can further expand the calculate function for additional combinations. The importance of the first selection's value may vary, and the second selection may influence the final price.

edit: This version offers you the option to either calculate the price using the function or the if-else construct. The getPrice function utilizes a 3-dimensional array where each dimension corresponds to the values in box1, box2, and box3 respectively. Think of these dimensions as paths leading to your specified price. The if-else part is included for your convenience. I've also extracted code to retrieve the value of an HTML selection. If you have specific inquiries, feel free to ask.

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>

This addresses your query. Remember to use onselect instead of oninput and ensure that IDs are unique. Each selection should have unique values for options. Check out the example above to see the calculation based on the values provided in your table. You can further expand the calculate function for additional combinations. The importance of the first selection's value may vary, and the second selection may influence the final price.

edit: This version offers you the option to either calculate the price using the function or the if-else construct. The getPrice function utilizes a 3-dimensional array where each dimension corresponds to the values in box1, box2, and box3 respectively. Think of these dimensions as paths leading to your specified price. The if-else part is included for your convenience. I've also extracted code to retrieve the value of an HTML selection. If you have specific inquiries, feel free to ask.

Answer 3

Answer №2

To start off, ensure that each of your <option> elements have distinct value attributes for easy identification. It's a good practice to leave the 'selection' default with an empty string, and assign unique identifiers to the other selections.

Next, determine the selected value by using

element.options[element.selectedIndex].value

. In order to do this, you'll first need to obtain the element using document.getElementById(). Remember to place this logic inside the function because the value will change!

Lastly, verify that none of the three values are empty strings, indicating that selections have been made. In this example, I've simply displayed the entered values, but feel free to perform any necessary calculations.

For the Tempered / Annealed values, it's advisable to work with raw integers, but I've used strings in the example below to showcase output clarity:

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 4

To start off, ensure that each of your <option> elements have distinct value attributes for easy identification. It's a good practice to leave the 'selection' default with an empty string, and assign unique identifiers to the other selections.

Next, determine the selected value by using

element.options[element.selectedIndex].value

. In order to do this, you'll first need to obtain the element using document.getElementById(). Remember to place this logic inside the function because the value will change!

Lastly, verify that none of the three values are empty strings, indicating that selections have been made. In this example, I've simply displayed the entered values, but feel free to perform any necessary calculations.

For the Tempered / Annealed values, it's advisable to work with raw integers, but I've used strings in the example below to showcase output clarity:

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>

Inquiring about how to retrieve data from a table using option select drop-downs

Answer №1

Answer №2

Similar questions

When attempting to incorporate a video using Sencha, an error occurs stating that the resource is being interpreted as an image but is being

Having trouble triggering a click event with React testing library?

Tips for receiving live updates of active users online with the help of Mongoose and socket.io

Unspecified data transfer between child and parent components

Can functions be used as keys in a collection in JavaScript's map?

Error encountered in amCharts Serial Chart when data parsing is enabled with the setting "parseDates": true which resulted in the failure to display data

Position of JSON data response is inaccurate

Updating the ID's of nested elements in JavaScript when duplicating an element

Discovering the minimum and maximum within an array containing objects

A guide on setting the array value on the user interface based on a key within the SectionList

I have a vision of creating a unique Countdown Stopwatch that meets all my

Text flickering unexpectedly during hover animation in Bootstrap

Checkbox fails to display as checked

Fixing extended properties on an express request can be done by following these steps

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

Obtain data attributes using JQuery's click event handler

The content division does not have a set position

invoking a function through prototype

The CSS overflow property does not seem to be functioning properly when applied to a span element that

Implementing JavaScript alerts with the Internet Explorer WebDriver and Selenium