HTML <Select> default based on MySQ

Question

I have a simple inventory database and on the input_data form, one of the input fields is field, as follow:

<select>
    <option>In Inventory</option>
    <option>In Process</option>
    <option>Shipped/in-transit</option>
    <option>Received by recipient</option>
</select>

If for example I input a data with "In Process" and later I would like to update that perticular data. The default back to "In Inventory" on my update_page.php file. I would like to see the "In Process" value selected.

Here is a snippet from my non-working code from my update_page.php:

<select name="status" value="<?php echo $row['status']; ?>">
    <option>In Inventory</option>
    <option>In Process</option>
    <option>Shipped/in-transit</option>
    <option>Received by recipient</option>
</select>

Answer 1

Select has no value attribute in HTML - you can have multiple options selected, and this is determined by the selected attribute on the option element

Mucky way:

<select name="status">
    <option<?php if ($row['status'] == "In Inventory"): ?> selected="selected"<?php endif; ?>>In Inventory</option>
    <option<?php if ($row['status'] == "In Process"): ?> selected="selected"<?php endif; ?>>In Process</option>
    <option<?php if ($row['status'] == "Shipped/in-transit"): ?> selected="selected"<?php endif; ?>>Shipped/in-transit</option>
    <option<?php if ($row['status'] == "Received by recipient"): ?> selected="selected"<?php endif; ?>>Received by recipient</option>
</select>

Slightly better way:

 <?php
      $options = array("In Inventory", "In Process", "Shipped/in-transit", "Received by recipient");
 ?>

 <select>
     <?php foreach ($options as $option): ?>
         <option value="<?php echo $option; ?>"<?php if ($row['status'] == $option): ?> selected="selected"<?php endif; ?>>
             <?php echo $option; ?>
         </option>
     <?php endforeach; ?>
 </select>

Best way - store these options in a database table - probably better using ID values rather than strings (allows for easier updating of option labels) and loop over the possible options taking from a DB query like I have above. If this select list is used a lot, cache the results of the query to get the options (remember that you'd need to clear the cache if the list gets updated)

Answer 2

The simpler code I've found, using only JavaScript (no jQuery needed). Put it right after the declaration of the listbox and set the selected index there:

<script>
document.getElementById('listBoxId').selectedIndex=<?php echo $INDEX ?>;
</script>

Answer 3

Each option has its corresponding value not the select tag. So, you will have to compare the values of each option with the status.

Answer 4

You'll have to check for each one if it's the selected one, like this, for exampel:

<option <?php if ($row['status'] == 'In Process') echo 'selected'; ?>>In Process</option>

If you use jQuery, you could do a somewhat cleaner solution, in your case give your select tag an id, then:

$(document).ready(function() {
    $('#select-id option:contains("<?php echo $row['status']; ?>")').prop('selected', true);
});