Delete image button in dropdown [closed]

Question

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.

Answer 1

As Franchesca said this is probably more a stackoverflow question. However i thought i'd throw in my two cents on what you're trying to achieve.

By default the HTML select element cannot handle any formatting inside the options.

The reason the text field method works well is because you always know the dimensions of the input text field so you can float an image reliably over the field to clear it. This isn't the case for a select field.

I would consider not building a HTML select element at run time but instead building up a list () and styling it to act as a drop down. This will give you much more control over your drop down items and give you the ability to bind a click event to the option itself AND the remove button.

Consider asking this question on Stackoverflow as you may get example code etc