User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 ="";
    $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>"; }

This didn't work since basic HTML select doesn't seem to be capable of handling images

2) Using plugins & 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 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.

share|improve this question

closed as off-topic by Franchesca, Matt Obee, Charles Wesley, JonW Jun 5 '14 at 15:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Franchesca, Matt Obee, Charles Wesley, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

I think this is really a stackoverflow question. I will suggest migrating the question. – Franchesca Jun 5 '14 at 14:48
Thank you. I have posted it on stackoverflow. – John Jun 5 '14 at 16:15

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

share|improve this answer
Thank you for your inputs. I will try to use list instead of dropdown. I have posted this question on stackoverflow. – John Jun 5 '14 at 16:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.