Нужна ваша помощь!
Есть форма с выпадающим списком (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 != "---")
но так не работает...
