Got it, here's a clear roadmap to build this feature without writing the full code for you—let's break it down step by step:

1. Parse the CSV into a Searchable PHP Array #

First, you need to turn your CSV data into a structure that lets you quickly look up prices by size. A key-value array works perfectly here, where the key is the exact size string (like 914×762) and the value is the corresponding price.

• Use PHP's built-in fgetcsv() function to read the CSV file line by line.
• For each row, extract the size and price fields (adjust the index numbers based on your CSV's column order—e.g., if size is column 0 and price is column 1):

  $priceLookup = [];
  $csvFile = fopen('your-file.csv', 'r');
  
  // Skip header row if your CSV has one
  fgetcsv($csvFile);
  
  while (($row = fgetcsv($csvFile)) !== false) {
      $size = trim($row[0]); // Adjust index to match your CSV's size column
      $price = (float)$row[1]; // Adjust index to match your CSV's price column
      $priceLookup[$size] = $price;
  }
  fclose($csvFile);
  

• This array will let you do instant lookups like $priceLookup['914×762'] to get 23.05.

2. Build the HTML Selection Interface #

You need two dropdowns (or a single dropdown of pre-built size pairs—whichever fits your CSV structure). Let's cover both approaches:

Option A: Separate Width + Height Dropdowns #

If your CSV lists individual widths and heights as separate columns, build two <select> elements:

<form method="POST" action="price-lookup.php">
  <label for="width">Width:</label>
  <select name="width" id="width">
    <option value="914">914</option>
    <option value="1000">1000</option>
    <!-- Add all your width options -->
  </select>

  <label for="height">Height:</label>
  <select name="height" id="height">
    <option value="762">762</option>
    <option value="800">800</option>
    <!-- Add all your height options -->
  </select>

  <button type="submit">Get Price</button>
</form>

Then combine the values into the exact size string your CSV uses (e.g., $_POST['width'] . '×' . $_POST['height']).

Option B: Single Size Dropdown #

If your CSV uses pre-combined size strings, use a single dropdown with those exact strings as values:

<form method="POST" action="price-lookup.php">
  <label for="size">Select Size:</label>
  <select name="size" id="size">
    <option value="914×762">914×762</option>
    <option value="1000×800">1000×800</option>
    <!-- Add all your size options -->
  </select>
  <button type="submit">Get Price</button>
</form>

This is simpler if your sizes are fixed pairs.

3. Connect Frontend to PHP Logic #

You have two main ways to handle the user's selection:

Option 1: Server-Side Form Submission #

When the user submits the form, your PHP script (price-lookup.php) will:

• Retrieve the selected size (either combined from width/height, or directly from the size dropdown).
• Look up the price in your $priceLookup array.
• Output the result to the page (e.g., "Price: $23.05").

Add this logic to price-lookup.php:

// Include the CSV parsing code here, or require a separate file with it

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Get size from form
    if (isset($_POST['size'])) {
        $selectedSize = trim($_POST['size']);
    } else {
        $selectedSize = trim($_POST['width']) . '×' . trim($_POST['height']);
    }

    // Look up price
    if (isset($priceLookup[$selectedSize])) {
        echo "Price: $" . number_format($priceLookup[$selectedSize], 2);
    } else {
        echo "No price found for this size.";
    }
}

Option 2: AJAX (No Page Refresh) #

For a smoother user experience, use JavaScript to send the selection to PHP and display the price instantly:

• Add an event listener to the dropdowns/form to trigger an AJAX request.
• Your PHP script will return the price as plain text or JSON.
• Update a DOM element with the result.

Example JavaScript snippet (using vanilla JS):

const sizeSelect = document.getElementById('size');
const priceDisplay = document.getElementById('price-display');

sizeSelect.addEventListener('change', function() {
    const selectedSize = this.value;
    fetch('price-lookup.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'size=' + encodeURIComponent(selectedSize)
    })
    .then(response => response.text())
    .then(data => {
        priceDisplay.textContent = data;
    });
});

Then adjust your PHP script to return just the price (or error message) instead of full HTML.

4. Edge Cases to Handle #

• Make sure to trim whitespace from CSV values and form inputs (size strings are case-sensitive and whitespace-sensitive!).
• Add error handling for missing CSV files, invalid form submissions, or sizes that don't exist in the CSV.
• If your CSV uses different separators (like semicolons instead of commas), pass the separator as the second argument to fgetcsv() (e.g., fgetcsv($csvFile, 0, ';')).

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