Display image icon before select optgroup in pulldown

i came across this jquery plugin and thought it be nice to have a grouped states with cities under it with the states having icons

thanks to the fantastic ray, i was able to have a pulldown with grouped citys by states
see code here php pulldown - grouped

see templates example of sorta what id like to do here icons in pulldowns
i know its converting it to a div. to add the icons and a nifty search box too.

i did have it doing this before as plain code but when i set out to pull the info from mysql i took it out and lost how to do this. so i know its possible.

i have tried to place an image html source before and after the optgroup ive tryed background images too.

code so far

      <style type="text/css">

        img.flag { height: 15px; width: 20px; padding-right: 10px; }

      </style>
<?
include ("../mysqli_ctx.php");
$path="../";

// CREATE QUERY STRING
$sql = "SELECT id, city, state FROM current_loc ORDER BY state, city";

// RUN QUERY
$result = mysqli_query($mysqli, $sql);
/**
 * TEST FOR QUERY SUCCESS HERE, POSSIBLY TRIGGER_ERROR()
 */

// START THE SELECT CONTROL
$out = '<select style="width:300px" id="source">' . PHP_EOL;

// THE CURRENT STATE IS KEPT HERE
$old = '?';

// THE INITIAL OPTGROUP STATUS IS KEPT HERE
$grp = FALSE;

// USE AN ITERATOR TO RETRIEVE THE ROWS OF THE RESULTS SET
while($row = mysqli_fetch_object($result))
{
    // IF THIS IS A ROW WITH A NEW STATE?
    if ($row->state != $old)
    {
        // IF THERE IS AN EXISTING OPT-GROUP
        if ($grp)
        {
            // TIE OFF THE OLD OPT-GROUP
            $out .= '</optgroup>' . PHP_EOL;
        }
        
        // ADD THE OPT-GROUP FOR THE NEW STATE
        $flag = '<img class="flag" src="'.$path.'images/flags/'.strtolower($row->state).'.png">';
        $out .= $flag.'<optgroup label="' . $row->state . '" style="background-image:url(../images/flags/'.strtolower($row->state).'.png)">' . PHP_EOL;
        $out .= '<option value="' . $row->id . '">' . $row->city . '</option>' . PHP_EOL;
        
        // CHANGE STATES
        $old = $row->state;
        $grp = TRUE;
    }
    // IF THIS IS ANOTHER CITY IN THE SAME STATE
    else
    {
        // JUST ADD THE CITY OPTION
        $out .= '<option value="' . $row->id . '">' . $row->city . '</option>' . PHP_EOL;
    }
}
// AT THE END OF THE RESULTS SET, TIE OFF THE OPT-GROUP AND THE SELECT CONTROL
$out .= '</optgroup>' . PHP_EOL;
$out .= '</select>' . PHP_EOL;

echo $out;
/**
 *
 * @todo       do
 * @date       The current date is: Wed 10/23/2013 
Enter the new date: (mm-dd-yy)  *
 */


?>
<select style="width:300px" id="source">
    <optgroup label="IL">
        <option value="" style="background-image:url(../images/flags/il.png);">Champaign</optgroup>
    </optgroup>
    <img class="flag" src="../images/flags/ma.png"><optgroup label="MA">
        <option value="">Boston</option>
    </optgroup>
    <optgroup label="OH"><img class="flag" src="../images/flags/oh.png">
        <option value="">Springfield</option>
    </optgroup>
</select>

<img class="flag" src="../images/flags/il.png">

Select allOpen in new window

im open to doing this via jquery and adding a search box too like the one in select 2.4.3(template). or how ever we can get it to function.

thank in advance for any code or help you may provide.
Johnny