эхх.....
ну поехали с самого начала, на пальцах.
1. Загружается документ
2. Подгружаются данные списков, стили и т.п.
3. После фул загрузки страницы включается обработчик SELECT и добавляет DOM список (DIV > UL > LI) и заполняет список LI с OPTION
4. OPTION:SELECTED помещается путем обработчика в DIV который по сути стоит над UL > LI
пример:
<select>
<option value="">text test 1</option>
<option value="" selected="selected">text test 2</option>
<option value="">text test 3</option>
</select>
<div class="jq-select-wrap">
<div class="jq-select-text">text test 2</div>
<div class="jq-select-list">
<ul>
<li>text test 1</li>
<li class="sel">text test 3</li>
<li>text test 3</li>
</ul>
</div>
</div>
Дальше у нас в списке <option>...</option> некоторые пункты имеют пробелы перед названием и нам нужно их удалить.
Включаем replace, функция запускается одновременно с обработчиком DOM списка, тут я нашел два пути:
А: Мы берем .text() из выбранного пункта option:selected убираем лишнее и вставляем в DIV (в примере: div.jq-select-text)
- минус: не работает на вновь создавшихся списках
В: Мы берем .text() из div.jq-select-text и убираем лишние символы,
работает на всех списках, но при изменении option:selected функция replace игнорирует нужный div.