checkboxes inside a scrollable list

We all love such things on sites, which are very convenient, which contain a lot of information, but not all of it is visible, but is provided in parts, exactly what we need.
Today I suggest you look at an example of how to put a checkbox 's inside a scrollable <select>.
Of course, this is not provided for by standard methods, so the list can be made through an iframe or a layer and it already has standard checkboxes.
The idea is to replace the default <options> with a <div> that will contain the default <input type="checkbox" /> . and it's easy to make it drop down, just using jquery.

Standard method where only one product can be selected :

<select name="choice">
 <option value="">Products</option>
 <option value="">Product 1</option>
 <option value="">Product 2</option>
 </select>

Select multiple products using the checkbox.

<div>
 <span><input type="checkbox" name="cat1" value="/">
Products 1</span>
 <span><input type="checkbox" name="cat1" value="/">
Products 2</span>
 </div>