具有<；选择>；列表 - Multiple values with <Select> List

Multiple values with <Select> List

本文关键字：列表 gt 选择具有 lt | 更新日期: 2023-09-27

我创建了一个包含4个产品类别的列表。它运行良好，并将所有值传递到下一页。

代码为：

echo "<tr><td>Product Category* </td>";
echo "<td>";
echo "<select size='"1'" name='"pc'" id='"pc'">"; 
echo "<option value='"0'">Product Category</options>"; 
echo "<option value='"Hair'">Hair</options>"; 
echo "<option value='"Skin'">Skin</options>"; 
echo "<option value='"Nail'">Nail</options>"; 
echo "<option value='"Eyes'">Eyes</options>"; 
echo "</select></td>";

我希望这个列表将另外4个值（产品类别ID）与当前值一起转移到下一页。

头发ID为：77
皮肤ID为：88
指甲ID为：99
for Eyes ID为：66

echo "<tr><td>Product Category* </td>";
echo "<td>";
echo "<select size='"1'" name='"pc'" id='"pc'">"; 
echo "<option value='"0'">Product Category</options>"; 
echo "<option value='"77-Hair'">Hair</options>"; 
echo "<option value='"88-Skin'">Skin</options>"; 
echo "<option value='"99-Nail'">Nail</options>"; 
echo "<option value='"66-Eyes'">Eyes</options>"; 
echo "</select></td>";

和服务器端上"-"的拆分值

为什么不把这些id作为值？

echo "<tr><td>Product Category* </td>";
echo "<td>";
echo "<select size='"1'" name='"pc'" id='"pc'">"; 
echo "<option value='"0'">Product Category</options>"; 
echo "<option value='"77'">Hair</options>"; 
echo "<option value='"88'">Skin</options>"; 
echo "<option value='"99'">Nail</options>"; 
echo "<option value='"66'">Eyes</options>"; 
echo "</select></td>";

如果您不理解Juhana的注释，这就是他的意思。

echo "<td>";
echo "<select size='"1'" name='"pc'" id='"pc'">"; 
echo "<option value='"0'">Product Category</options>"; 
echo "<option value='"77'">Hair</options>"; 
echo "<option value='"88'">Skin</options>"; 
echo "<option value='"99'">Nail</options>"; 
echo "<option value='"66'">Eyes</options>"; 
echo "</select></td>";

但是，如果您想通过JS/jQuery解决方案来实现这一点。

jQuery

$(function() {
    $('#pc').change(function() {
        var cat_id = $('option:selected', this).data(category_id);
        $('#cat_id').val(cat_id);
    });
});

PHP

    echo "<td>";
    echo "<select size='"1'" name='"pc'" id='"pc'">"; 
    echo "<option value='"0'">Product Category</options>"; 
    echo "<option data-category_id='"77'" value='"Hair'">Hair</options>"; 
    echo "<option data-category_id='"88'" value='"Skin'">Skin</options>"; 
    echo "<option data-category_id='"99'" value='"Nail'">Nail</options>"; 
    echo "<option data-category_id='"66'" value='"Eyes'">Eyes</options>"; 
    echo "</select></td>";
    echo "<input type='"hidden'" id='"cat_id'" name='"category_id'" />";