Default Select Box "Prefilling" to emulate a Choice of the Existing Data

For editing information in my web applications, I prefill what existing data I have in my forms. For text type input tags, it is easy as pie. But, what to do for a select tag. Yeah, fun stuff. Let's get to it.

//$address is just an integer counter that starts at 0 and increments before a new address is pulled from the database.

//So, having said that, let's build the HTML select element where $address makes this chunk of code able to be specifically referenced later on by creating a unique id="state0", id="state1", id="state2", and so on for each address.


<?php

echo "<div>State:<select id=\"state" . $address . "\" name=\"UTstate\">\n
<optgroup label=\"U.S. States\">\n
<option value=\"IN\">Indiana</option>\n
<option value=\"MI\">Michigan</option>\n
<option value=\"NY\">New York</option>\n
<option value=\"OH\">Ohio</option>\n
<option value=\"PA\">Pennsylvania</option>\n
<option value=\"TN\">Tennessee</option>\n
<option value=\"VA\">Virginia</option>\n
<option value=\"WV\">West Virginia</option>\n
</optgroup>\n
</select>\n";

//There we have it. But now to make things easier for editing let's make the default value the same as what had been in the database using jQuery magic.

echo "<script>$('#state" . $address . " option[value=" . $row2['state'] . "]').attr('selected', 'selected');</script>";

?>

//This short chunk of jQuery JavaScript selects the corresponding state0, state1, or state2 and so on which should be the preceeding address state select block. It searches for the $row2['state'] database information within the option group tags. When it finds a match, it modifies the selected attribute of the tag to be set to selected.



Can we just show the HTML? Please?

Sure, hold on to your biscuits.




//This is what we start off with. All of the PHP code has done it's thing, this has become raw HTML code. Note that database read resulted in OH and we pumped OH into the jQuery JavaScript as you will soon see.

State:<select id="state0" name="UTstate">
<optgroup label="U.S. States">

<option value="IN">Indiana</option>

<option value="MI">Michigan</option>

<option value="NY">New York</option>

<option value="OH">Ohio</option>

<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>

<option value="WV">West Virginia</option>

</optgroup>

</select>

//Then as I said we hit the short chunk of jQuery JavaScript. The OH was read from the database as mentioned earlier telling the browser which option tag identified by it's value to modify contained within the state0 select tag.

<script>$('#state0 option[value=OH]').attr('selected', 'selected');</script>

//The DOM gets modified and now the <otion value="OH">Ohio</option> tag has been modified as far as the user can see and the browser is keeping track of. It now looks and acts as so...

State:<select id="state0" name="UTstate">
<optgroup label="U.S. States">

<option value="IN">Indiana</option>

<option value="MI">Michigan</option>

<option value="NY">New York</option>

<option value="OH" selected="selected">Ohio</option>

<option value="TN">Tennessee</option>
<option value="VA">Virginia</option>

<option value="WV">West Virginia</option>

</optgroup>

</select>

Yaay!

This is for examples where only one selection is expected, for select boxes that allow multiple selections the code will be somewhat different but a similar method can be used.