I am trying to make a custom drop down list, each row having two selectable options. To be more precise, I want on each row to have two options: select item(which should act as a implicit ddl works) or delete selected item (which removes the selected item from the list).

This is basicly how my ddl shoud look when it's clicked:

item1 delItem1
item2 delItem2
item3 delItem3

If a user clicks item i get an event for that click, and i can update the page based on selected item.
If a user clicks delItemN then itemN and delItemN would disappear from the list.

Anyone could point me to a tutorial or give me some basic tips on how I could achieve this?


Member Avatar

Hmm you want two selectable options in a row of a select dropdown (or a list). As far as I know this isn't possible with html5 elements, however, I'm sure you could create your own by creating something like jQuery plugin.

If this is just for you fine - but if not - bear a thought for your users as unconventional form elements can be confusing / bewildering.

Haven't used it, but may be something here: https://code.google.com/p/jquerymulticolumnselectbox/

@diafol thanks for the input.
That plugin indeed show data on two columns, but it also acts as if there is only one column. Anyway i'm looking over it, maybe it would give me an idea of sorts.