I have a tricky requirement regarding the website I am building. I am not sure if it is exactly a design issue or not. I have a drop down which is created at run time. This has a list of user created filters. Now I want to add a small image X.gif beside every item in the list which when clicked will delete that particular item. I want to do so because that will avoid a "Delete Filter" button in the main screen
I have already tried below possiblilies. 1) Trying to insert an image in the list box through code like below
$FilterDropDown ="";
if($FilterArray)
{
$FilterDropDown = "<select name='FilterName' id ='FilterName'><option selected value='Default'>Default</option>";
foreach( $FilterArray as $FilterVal)
{$FilterDropDown.="<option value=".$FilterVal['filter_name'].">".$FilterVal['filter_name']."<img src="/images/close_over.gif"" class=""button""></img>"."</option>"; }
$FilterDropDown.="</select>";
}
This didn't work since basic HTML select doesn't seem to be capable of handling images
2) Using plugins http://designwithpc.com/Plugins/ddSlick & http://www.marghoobsuleman.com/jquery-image-dropdown. They work fine if image is just to be shown along with text but upon click, it behaves same way as if the text in the item is clicked. So there is no way to write a function which will be called upon when delete image is clicked.
I had asked an earlier question (Should input fields be cleared out when the user selects them?) in which user "API-Beast" had suggested an input box like below link http://i.stack.imgur.com/2b74m.png. I guess if it is possible in input box, such solution might be possible for the dropdown also. I would really appreciate any suggestions on how to achieve this.