使用<选择>列表的多个值

I've created a list of 4 product categories. It's working fine and passing all the values to the next page.

Code is:

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>"; 

I want this list to transfer 4 more values (product category IDs) with the current values to the next page also.

• for Hair ID is: 77
• for Skin ID is: 88
• for Nail ID is: 99
• for Eyes ID is: 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>"; 

and split value for "-" on server side

In case, you don't understand Juhana's comment, this is what he means.

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>";

However, if you'd like to do this via a JS / jQuery solution.

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\" />";

Why you don't put these id's for value?

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>";