如何存储从动态下拉列表中选择的选项

Question

编辑：

所以，我将颜色转移到我的购物车页面，但是当我尝试将其添加到购物车时，它选择了下拉菜单中的最后一个选项。我一直在寻找实现 selected='selected' 的方法，但在这个 while 循环中很痛苦。

我当前的产品页面：

        <?php
include("include/db.php");
include("include/productfunctions.php");

 if($_REQUEST['command'] == 'add' && $_REQUEST['productid'] > 0 &&   $_REQUEST['Color'] != ' ')
 {
    $product_id = $_REQUEST['productid'];
    $color = $_REQUEST['Color'];
    add_to_cart($product_id, 1, $color);
    header("Location:cart.php");
    exit();
 }
?>

<script type="text/javascript">
//This js is necessary to determine which button on the 
// form the user clicked.

function addtocart(prod_id, color_ID)
{
document.productform.productid.value = prod_id;
document.productform.Color.value = color_ID;
document.productform.command.value = 'add';
document.productform.submit();
}
</script>

<form name="productform" action="">
<input type="hidden" name="Color" />
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>

<table id="product_table">
<?php

$query = "SELECT * FROM product";
$result = mysqli_query($dbc, $query) or die("Error querying database");
while($row = mysqli_fetch_array($result))
{
    $p_ID = $row['Prod_ID'];

    echo '
    <div class="img">
    <strong>'.$row['name'].'</strong>

    <br><img src="' . $row['image'] . '" /></br>

    <div class="desc"> 
    Description: ' . $row['description'] . '<br>        
    <br>Price: $ ' . $row['price'] . '</br>
    <br>
    </div>';
    $query1 = "SELECT * FROM color c JOIN inventory i ON ( c.Color_ID =  i.Color_ID ) JOIN product p ON ( p.Prod_ID = i.Prod_ID ) WHERE p.Prod_ID = $p_ID"; 
    $result1 = mysqli_query($dbc, $query1) or die("Error querying database");

    Print "<p>Decorative Color:\n";
    Print "<select name=\"Color_ID\">\n";

    while($row = mysqli_fetch_array($result1))
    {
        $color_ID = $row['Color_ID'];

        Print "<option value=".$row['Color_ID']."> " . $row['Color'] . "\n     </option>";

    }

    Print "</select>\n";
    Print "</p>\n";

    echo '<div class="checkout">
    <input type="button" value="Add to Cart" onclick="addtocart('. $p_ID .    ','. $color_ID . ')" /></br>
    </div>
    </div>';

} 

?>

</table>

添加到购物车的功能：

    function add_to_cart($product_id, $quantity, $color)
{
if($product_id < 1 || $quantity < 1)
{
    return;
}

if(is_array($_SESSION['cart']))
{
    $exists_results = product_exists($product_id);
    $exists = $exists_results[0];
    $position = $exists_results[1];

    if($exists)
    {
        $new_quantity = intval($_SESSION['cart'][$position]['quantity']);
        $new_quantity++;
        $_SESSION['cart'][$position]['quantity'] = $new_quantity;
    }
    else
    {
        $max = count($_SESSION['cart']);
        $_SESSION['cart'][$max]['productid'] = $product_id;
        $_SESSION['cart'][$max]['quantity'] = $quantity;
        $_SESSION['cart'][$max]['Color'] = $color;
    }

}

else
{
    $_SESSION['cart'] = array();
    $_SESSION['cart'][0]['productid'] = $product_id;
    $_SESSION['cart'][0]['quantity'] = $quantity;
    $_SESSION['cart'][0]['Color'] = $color;
}
}



 function product_exists($product_id)
{
$product_id = intval($product_id);
$max = count($_SESSION['cart']);
$flag = 0;

for($i=0; $i < $max; $i++)
{
        if($product_id == $_SESSION['cart'][$i]['productid'])
        {
            $flag = 1;
            break;
        }
}
return array ($flag, $i);
}

?>

购物车：

<?php
if(count($_SESSION['cart']))
{
    echo '<tr>
    <th>Name</th>
    <th>Price</th>
    <th>Decorative Color</th>
    <th>Qty</th>
    <th>Amount</th>
    <th>Options</th>
    </tr>';

    $max = count($_SESSION['cart']);
    for($i = 0; $i < $max; $i++)
    {
        $product_id = $_SESSION['cart'][$i]['productid'];
        $quantity = $_SESSION['cart'][$i]['quantity'];
        $color = $_SESSION['cart'][$i]['Color'];
        $product_name = get_product_name($dbc, $product_id);
        $product_price = get_price($dbc, $product_id);
        $product_color = get_color($dbc, $color);

        if($quantity == 0)
        {
            continue;
        }

        echo '<tr>
        <td>' . $product_name . '</td>
        <td>&#36; ' . $product_price . '</td>
        <td>' . $product_color . '</td>
        <td><input type="text" name="product' . $product_id . '" value="' .
                        $quantity . '" maxlength="4"   size="2" /></td>
        <td>&#36; ' . $product_price*$quantity . '</td>
        <td><a href="javascript:del(' . $product_id . ')">Remove Item</a>   </td>
        </tr>';         
    }

    echo '<tr>
    <td colspan="2"><strong>Order Total: &#36;' . get_order_total($dbc) .   '</strong></td>
    <td></td>
    <td colspan="3" id="cart_buttons">
    <input type="submit" value="Clear Cart" onclick="clear_cart()">
    <input type="submit" value="Update Cart" onclick="update_cart()">
    <input type="submit" value="Complete Order" onclick="complete_order()">
    </td>
    </tr>';
}
else
{
    echo '<tr><td>There are no items in your shopping cart.</td></tr>';
}
?>

编辑 2：

function addtocart(prod_id)
{
document.productform.productid.value = prod_id;
document.productform.Color.value = $("select[name='color_' + prod_id] option:selected").val();
document.productform.command.value = 'add';
document.productform.submit();
}

其他编辑：

Print "<select name=\"Color_" . $p_ID . "\">";

Answer 1

不确定我的观察是否会有所帮助，只是我注意到或想知道的一些事情。在第一个代码块中，您似乎没有提供关闭选项标签。

在第二个代码块中，我看到您尝试获取颜色，但看起来您并没有对它做任何事情。此外，您正在对“颜色”进行 GET，但装饰颜色的选择名称是“Color_ID”。最后，您似乎在项目的“装饰颜色”应该出现的位置放置了一个空白单元格。你能确认这些细节是不是故意的吗？

编辑：将以下行添加到您的

中，在所有其他 JS 之前，以导入 jQuery。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

在您的 addtocart 函数中，删除颜色作为参数。而是将 document.productform.Color.value 行更改为以下内容。

document.productform.Color.value = $("select[name='Color_ID']").val();

类似的方法应该可以，但您必须尝试一下。因此，让我们剖析该行的 $("select[name='Color_ID']").val() 部分。在 jQuery 中，您可以从 DOM 中选择某些元素或元素组； $("p") 会选择所有段落元素，$("a") 会选择所有锚元素，这些被称为选择器。

您可以通过说您想要具有某些属性的元素来进一步指定；在这种情况下，您将获得任何带有名称属性“Color_ID”的选择，其中“[name='Color_ID']”部分附加到“select”元素。抓取该特定元素后，任何选择器上的 val() 函数都将抓取所选元素的值。看看这是否有效。

编辑 2：

document.productform.Color.value = $("select[name='Color_ID'] option:selected").val();

编辑 3：

document.productform.Color.value = $("select[name='color_' + prod_id +] option:selected").val();

在这种情况下，对于每个选择，您必须将其命名为 "color_" 。 $p_ID。这取决于你想如何命名它。