[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1477
  • Last Modified:

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

Open 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
0
Johnny
Asked:
Johnny
  • 6
  • 4
1 Solution
 
Ray PaseurCommented:
Can you please show us the HTML that is generated by that PHP script?  If you have it on a server, just send us the link to the SSCCE with a few rows of state/city data, thanks.
0
 
JohnnyAuthor Commented:
the above codes output
<style type="text/css">

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

      </style>
<select style="width:300px" id="source">
<img class="flag" src="../images/flags/il.png"><optgroup label="IL" style="background-image:url(../images/flags/il.png)">
<option value="5">Champaign</option>
<option value="2">Chicago</option>
</optgroup>
<img class="flag" src="../images/flags/ma.png"><optgroup label="MA" style="background-image:url(../images/flags/ma.png)">
<option value="1">Boston</option>
</optgroup>
<img class="flag" src="../images/flags/oh.png"><optgroup label="OH" style="background-image:url(../images/flags/oh.png)">
<option value="3">Columbus</option>
<option value="4">Springfield</option>
</optgroup>
</select>
<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>

Open in new window

0
 
Ray PaseurCommented:
But what is the URL?  I think we need to follow the file paths.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JohnnyAuthor Commented:
0
 
Ray PaseurCommented:
I'll tinker with this a bit.  Not sure if it matters, but the style declarations usually end with a semi-colon.
0
 
Ray PaseurCommented:
Some of the style attributes seem to apply and others are ignored.
http://www.laprbass.com/RAY_temp_pern.php

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.flag {
    height: 15px;
    width: 20px;
}
.myOptGroup {
    color:red;
    margin: 0px 0px 0px 44px;
    background-image:url('http://completelocal.info/images/flags/oh.png');
    background-color:blue;
}
option {
    color:green;
}
select {
    width:300px;
}
</style>

</head>
<body>
<!-- http://completelocal.info/images/flags/oh.png -->
<select>
  <optgroup label="Swedish Cars" class="myOptGroup">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars" style="margin: 0px 0px 0px 144px; background-image:url('http://completelocal.info/images/flags/il.png');">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

</body>
</html>

Open in new window

0
 
JohnnyAuthor Commented:
Yeah its odd isn't it
0
 
Ray PaseurCommented:
Looking at this, it seems you can add the images to the options, but I didn't see any added to the optgroups.  It may not have browser support (even if it should).
http://ivaynberg.github.io/select2/
0
 
JohnnyAuthor Commented:
abandoned this as it does not seam to be possible, thx for the help
0
 
Ray PaseurCommented:
Sorry there was no magic bullet, but thanks for the points anyway.  Best, ~Ray
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now