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>