checkbox'ы внутри прокручивающегося списка

Все мы любим такие штучки на сайтах, очень удобные в которых находится много информации но она не вся видна, а предоставляется по частям, то что именно нам нужно.
Сегодня предлагаю вам посмотреть пример как checkbox 'ы положить внутрь прокручивающегося списка <select>.
Конечно стандартными методами это не предусмотрено, поэтому список можно сделать через iframe или слоем а в нем уже стандартные checkbox.
Идея состоит в том чтобы заменить стандартные <options> на блок <div> в котором будут стандартные <input type="checkbox" />. а сделать выпадающим, не составит труда ,просто используя jquery.

Стандартные метод в котором можно выбрать только один продукт:

<select name="choice">
     <option value="">Продукция</option>
     <option value="">Продукция 1</option>
     <option value="">Продукция 2</option>
</select>

Выбираем несколько продуктов, используя checkbox.

<div>
    <span><input type="checkbox" name="cat1" value="/">
Продукция 1</span>
    <span><input type="checkbox" name="cat1" value="/">
Продукция 2</span>
</div>