基于下拉框选择调用数据表？多下拉框获取平方英尺成本高效方案

Hey there! Let's break down your two questions with practical, easy-to-implement solutions:

The key here is linking your dropdown selections to a structured data source, then fetching and displaying the matched data when the selection changes. Here's a step-by-step approach:

• Structure your data clearly: Use a JavaScript object or array to map dropdown values/texts to their corresponding data. For example:

  // Simulate your data table
  const productData = {
    autumn: { costPerSqFt: 2.5, material: "Frosted Glass", leadTime: "3 business days" },
    winter: { costPerSqFt: 3.2, material: "Textured Glass", leadTime: "5 business days" }
  };
  

• Bind an event to your dropdown: Use onchange or oninput to trigger a function whenever the selection updates.
• Fetch and display the data: In the triggered function, grab the selected value, match it to your data table, and render the result on the page.

Here's a full working example:

<select id="dataSelector" onchange="fetchData()">
  <option value="">Select an Item</option>
  <option value="autumn">Autumn Leaves</option>
  <option value="winter">Winter Frost</option>
</select>
<div id="dataDisplay"></div>

<script>
const productData = {
  autumn: { costPerSqFt: 2.5, material: "Frosted Glass", leadTime: "3 business days" },
  winter: { costPerSqFt: 3.2, material: "Textured Glass", leadTime: "5 business days" }
};

function fetchData() {
  const selectedValue = document.getElementById('dataSelector').value;
  const displayArea = document.getElementById('dataDisplay');

  if (selectedValue) {
    const item = productData[selectedValue];
    displayArea.innerHTML = `
      <p>Cost per sq ft: $${item.costPerSqFt}</p>
      <p>Material: ${item.material}</p>
      <p>Lead Time: ${item.leadTime}</p>
    `;
  } else {
    displayArea.textContent = "Please select an item to view details.";
  }
}
</script>

Since you already know how to use <select> and <option>, the efficient way to handle three dependent dropdowns is to structure your pricing data for quick lookups and reuse a single calculation function. Here's how to do it:

Step 1: Structure your pricing table for nested lookups #

Map each combination of dropdown selections directly to the corresponding cost. A nested object works great here (easy to read and maintain):

const pricingTable = {
  "1": { // Value from box1 (Autumn Leaves)
    "3mm": { // Value from box2
      "0-100": 2.5, // Value from box3 → cost
      "101-200": 2.3
    },
    "5mm": {
      "0-100": 3.1,
      "101-200": 2.9
    }
  },
  "2": { // Value from box1 (Winter Frost)
    "3mm": {
      "0-100": 2.7,
      "101-200": 2.5
    },
    "5mm": {
      "0-100": 3.3,
      "101-200": 3.1
    }
  }
};

Step 2: Reuse a single calculation function #

Bind the same calculate() function to all three dropdowns (you already started this with oninput="calculate()"). To optimize performance, cache your DOM elements upfront so you don't re-query the DOM every time.

Full working example (building on your code snippet): #

<table>
  <tr>
    <td>
      <select id="box1" oninput="calculate()">
        <option value="0">Select Glass Pattern</option>
        <option value="1">Autumn Leaves</option>
        <option value="2">Winter Frost</option>
      </select>
    </td>
    <td>
      <select id="box2" oninput="calculate()">
        <option value="0">Select Thickness</option>
        <option value="3mm">3mm</option>
        <option value="5mm">5mm</option>
      </select>
    </td>
    <td>
      <select id="box3" oninput="calculate()">
        <option value="0">Select Size Range</option>
        <option value="0-100">0-100 sq ft</option>
        <option value="101-200">101-200 sq ft</option>
      </select>
    </td>
  </tr>
</table>
<div id="costResult">Cost per sq ft: $0</div>

<script>
// Cache DOM elements once to avoid repeated queries
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box3 = document.getElementById('box3');
const costResult = document.getElementById('costResult');

const pricingTable = {
  "1": {
    "3mm": { "0-100": 2.5, "101-200": 2.3 },
    "5mm": { "0-100": 3.1, "101-200": 2.9 }
  },
  "2": {
    "3mm": { "0-100": 2.7, "101-200": 2.5 },
    "5mm": { "0-100": 3.3, "101-200": 3.1 }
  }
};

function calculate() {
  const pattern = box1.value;
  const thickness = box2.value;
  const sizeRange = box3.value;

  // Check if all dropdowns have valid selections
  if (pattern !== "0" && thickness !== "0" && sizeRange !== "0") {
    // Look up the cost directly from the nested table
    const cost = pricingTable[pattern][thickness][sizeRange];
    costResult.textContent = `Cost per sq ft: $${cost.toFixed(2)}`;
  } else {
    costResult.textContent = "Please select all options to calculate cost.";
  }
}
</script>

Pro tips for efficiency: #

• If your pricing data is extremely large, you can flatten it into a single object with composite keys (e.g., "1-3mm-0-100": 2.5) for even faster lookups.
• Replace the default value="0" with empty strings (value="") if 0 could ever be a valid value in your dropdowns.
• Add visual feedback (like disabling the result area until all selections are made) to improve user experience.

内容的提问来源于stack exchange，提问作者Atanass Arseniev