Выпадающий список (select)

[Ksenia90]

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

Есть форма с выпадающим списком (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 != "---")

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

[Fenex]

Как-то так видимо.

if($('.my_color a.selected').innerHTML != '---')

Но обработчик $('#color').change тут не будет работать. У вас нет элемента #color.

__________________
UPD: Вообще странно, на сайте jqTransform говорят, что код формы в HTML остаётся.
UPD2: А, ну код формы то остаётся, но он абсолютно не меняется при изменении видимого псевдообработчика. Пичаль.

[ADSoft]

надо смотреть события самого jqTransform

[Ksenia90]

Fenex, спасибо за вариант, то

if($('.my_color a.selected').innerHTML != '---')

почему-то не работает...

надо смотреть события самого jqTransform

Вот код jqTransform, связанный с селектами:

	/***************************
	  Select 
	 ***************************/	
	$.fn.jqTransSelect = function(){
		return this.each(function(index){
			var $select = $(this);

			if($select.hasClass('jqTransformHidden')) {return;}
			if($select.attr('multiple')) {return;}

			var oLabel  =  jqTransformGetLabel($select);
			/* First thing we do is Wrap it */
			var $wrapper = $select
				.addClass('jqTransformHidden')
				.wrap('<div class="jqTransformSelectWrapper"></div>')
				.parent()
				.css({zIndex: 10-index})
			;
			
			/* Now add the html for the select */
			$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
			var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
			/* Now we add the options */
			$('option', this).each(function(i){
				var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>');
				$ul.append(oLi);
			});
			
			/* Add click handler to the a */
			$ul.find('a').click(function(){
					$('a.selected', $wrapper).removeClass('selected');
					$(this).addClass('selected');	
					/* Fire the onchange event */
					if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
					$select[0].selectedIndex = $(this).attr('index');
					$('span:eq(0)', $wrapper).html($(this).html());
					$ul.hide();
					return false;
			});
			/* Set the default */
			$('a:eq('+ this.selectedIndex +')', $ul).click();
			$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
			oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
			this.oLabel = oLabel;
			
			/* Apply the click handler to the Open */
			var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
				.click(function(){
					//Check if box is already open to still allow toggle, but close all other selects
					if( $ul.css('display') == 'none' ) {jqTransformHideSelect();} 
					if($select.attr('disabled')){return false;}

					$ul.slideToggle('fast', function(){					
						var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
						$ul.animate({scrollTop: offSet});
					});
					return false;
				})
			;

			// Set the new width
			var iSelectWidth = $select.outerWidth();
			var oSpan = $('span:first',$wrapper);
			var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
			$wrapper.css('width',newWidth);
			$ul.css('width',newWidth-2);
			oSpan.css({width:iSelectWidth});
		
			// Calculate the height if necessary, less elements that the default height
			//show the ul to calculate the block, if ul is not displayed li height value is 0
			$ul.css({display:'block',visibility:'hidden'});
			var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
			(iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
			$ul.css({display:'none',visibility:'visible'});
			
		});
	};

[Fenex]

Fenex, спасибо за вариант, то
почему-то не работает...

Так он не работает, потому что не вызывается событие change. Это легко проверить, сделав такой тест:

$('#color').change(function() {console.log('changed');});

[Ksenia90]

Ох, я уже с этими скриптами замучалась, особенно с моим-то знанием js (точнее, незнанием)...

Fenex, может поможешь готовым решением? Конечно, отблагодарю (деньгами). Сколько такая работа стоит?

[Fenex]

Напишите мне в ЛС свой скайп.