Question

This could be an fun question. I’m planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:

1. The box will contain 2 different text-aligns making two neat rows.(see picture)
2. At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)

Some of you already know where this is going, I’ll need to make the thing like you’d make any such menu in GUI programming. I assume some object oriented Javascript programming?

(I’m looking for technical details as I’m novice at Javascript and jQuery(but not at programming), I’m basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I’m also perfectly aware that I’m normally not going to be using any actual html in this GUI.)

So my question is, how should I set out to do this according to you?

Answer 1

You will not be able to modify a normal select element to achieve this, you will have to

• Create a proxy-pro-select-element and hide the original one.
• Copy option elements and create equivalent one in your proxy
• You will have to also keep both selects in sync.

Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.

Technical details:

• Read how to implement a jQuery plugin
• In your plugin’s init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
• onclick on select-div, show dropdown div after re-positioning correctly

See code like this and modify