MySQL & Form: Populate second select options based on first selected (From same row)

Question

My problem is that I have three different stock sizes for each product that each contain a different amount of stock (large box, medium box, small box). Each product has the same box size but the quantity per box changes. When the product name is selected I want to then choose the box size and the quantity value should be set corresponding to the product row in the db.

------------------------------------------
|product      |small  |medium   |large   |
------------------------------------------
|Widget one   |100    |275     |400      |
------------------------------------------
|Widget two   |45     |100     |150      |
------------------------------------------
|Widget three |125    |150     |250      |

I already use php to get the select option product names from the db

    $product_select = mysql_query("SELECT * FROM products");

    echo '<select name="Product" id="product">'; 
    while ($row_item = mysql_fetch_array($product_select)){ 
    $pname = $row_item["product"]; 
    echo '<option value="' . htmlspecialchars($pname) . '">' . htmlspecialchars($pname)    . '</option>';

Then I need something like this that gets the row values for small medium and large based on the selected product from above:

<select><option value=" ">Small</option><option value=" ">Medium</option><option value=" ">Large</option></select>

EDIT

I have been trying to figure this out all night. Is this even possible? should I just try and go a different route?

Answer 1

You have 3 ways to implement this:

1. Use Optgroup tags inside one select tag.
2. Use Ajax to get sizes and puplating second select after choosing product in the first select.

3. Store serialized values of stock inside first select and populate second select from that values. For example:

     <select> <option values="100|275|400">Widget one</option> ... </select>