Javascript-форум - Выпадающий список (select)

Нужна ваша помощь!

Есть форма с выпадающим списком (select), которая стилизована с помощью скрипта jqTransform (стандартные поля скрываются, а вместо них генерируется вот такой вод код):

<span class="wpcf7-form-control-wrap my_color">
<div class="jqTransformSelectWrapper"">
<div>
<span style="width: 127px;">---</span>
<a href="#" class="jqTransformSelectOpen"></a>
</div>
<ul style="width: 156px; visibility: visible; height: 66px; overflow: hidden; display: none;">
<li><a href="#" index="0" class="selected">---</a></li>
<li><a href="#" index="1">Жёлтый</a></li>
<li><a href="#" index="2">Зелёный</a></li>
</ul>
</div>
</span>

Это вместо стандартного select:

<select name="my_color" id="color" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required jqTransformHidden">
<option value="---">---</option>
<option value="Жёлтый">Жёлтый</option>
<option value="Зелёный">Зелёный</option>
</select>

В этой же форме работает скрипт, скрывающий/открывающий другие поля в зависимости от значения, выбранного в этом селекте (если какое-то значение выбрано, то показываем блок с id step-1). Раньше, до подключения jqTransform этот скрипт (его часть) выглядел так:

$('#color').change(function() {
            if ($('#color').val() != "---") {
              $('#step-1').show(1800);
            }
});

После подключения jqTransform он, естественно, не работает, так как нет уже селекта как такового.

Вопрос: как изменить скрипт скрытия/раскрытия полей, чтобы он понимал, какое значение выбрано пользователем из выпадающего списка?

P.S.: В новом коде у каждого значения есть индексы (index="0,1,2"), поэтому, я так понимаю, нужно писать что-то типа

if ($('.my_color').index() != "---")

или

if ($select[0].selectedIndex != "---")

но так не работает...