Hey there, let's fix that multi-value passing issue you're having with your product detail page. The key here is to send both the color_id and item_id when the color selection changes, so your size query targets only the current product. Here's how to adjust your code step by step:

1. Update the color selector to store the current item_id #

First, add a data attribute to your color dropdown to hold the item_id of the current product. This makes it easy to access later in your JavaScript:

<select class="form-control" id="colorSelector" data-item-id="<?php echo $item_id; ?>" onchange="getSize(this.value)">
    <option value="">Select Color</option>
    <?php show_color_option()?>
</select>

(Note: I assume $item_id is already available in your template since you're using it to render color options with show_color_option().)

2. Modify the getSize() function to pass both parameters #

Adjust your AJAX function to pull the item_id from the dropdown's data attribute and send it along with the color_id:

function getSize(val){
    // Grab the current item_id from the color selector's data attribute
    const currentItemId = document.getElementById('colorSelector').dataset.itemId;
    
    $.ajax({
        type:'POST',
        url:'sizeoptions.php',
        // Send both values as an object (cleaner than a query string)
        data: {
            color_id: val,
            item_id: currentItemId
        },
        success:function(data){
            $('#sizeSelect').html(data);
        }
    });
}

Alternatively, you could pass the item_id directly in the onchange handler:

onchange="getSize(this.value, <?php echo $item_id; ?>)"

Then update the function signature to:

function getSize(colorId, itemId){
    // ... rest of the code, use colorId and itemId directly
}

Either approach works—pick whichever feels cleaner to you.

3. Update the size query in sizeoptions.php #

Now that your backend receives both color_id and item_id, modify the SQL query to filter for the specific product:

<?php
if(isset($_POST['color_id']) && isset($_POST['item_id'])){
    // Escape both parameters to prevent SQL injection
    $color_id = escape_string($_POST['color_id']);
    $item_id = escape_string($_POST['item_id']);
    
    $query = query("SELECT size_id FROM inventory WHERE color_id = {$color_id} AND item_id = {$item_id} GROUP BY size_id ");
    confirm($query);
    
    while($row = fetch_array($query)){
        $p_size = display_size($row['size_id']);
        $size_options = <<<DELIMETER
        <option value="{$row['size_id']}"> {$p_size} </option>
        DELIMETER;
        echo $size_options;
    }
}
?>

This ensures you only get sizes available for the selected color and the current product, not all products with that color.

4. Bonus: Get the correct storage_id later #

When you need to fetch the storage_id after selecting a size, you can use the same pattern—pass item_id, color_id, and size_id together:

function getSku(sizeVal){
    const colorId = document.getElementById('colorSelector').value;
    const itemId = document.getElementById('colorSelector').dataset.itemId;
    
    $.ajax({
        type:'POST',
        url:'get_storage_id.php', // Create this file to handle the request
        data: {
            color_id: colorId,
            item_id: itemId,
            size_id: sizeVal
        },
        success:function(data){
            // Use the storage ID (e.g., for add-to-cart logic)
            console.log('Matched storage ID:', data);
        }
    });
}

And the corresponding backend logic in get_storage_id.php:

<?php
if(isset($_POST['color_id']) && isset($_POST['item_id']) && isset($_POST['size_id'])){
    $color_id = escape_string($_POST['color_id']);
    $item_id = escape_string($_POST['item_id']);
    $size_id = escape_string($_POST['size_id']);
    
    $query = query("SELECT storage_id FROM inventory WHERE color_id = {$color_id} AND item_id = {$item_id} AND size_id = {$size_id}");
    confirm($query);
    $row = fetch_array($query);
    echo $row['storage_id'];
}
?>

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