Всем привет.
При преобразовании выпадающего select списка цветов столкнулся с проблемой. А именно что при выборе элемента option на странице происходит ряд операций, которые у меня не получается вызвать.
Использую jQuery. Код:
<script type="text/javascript">
var color_box_inUse = "";
jQuery(document).ready(function() {
var s = jQuery("#attribute85 option").length;
for(var i = 2; i < s+1; i++){
var str = jQuery("#attribute85 option:nth-child("+i+")").text();
var st = new Array();
st = str.split(" ");
var color = st[0];
var price = st[1];
var diver = jQuery('<div>', {
id: 'olor_box_'+i+'',
'class': 'color_box'
});
jQuery("#attribute85").parent().append(diver);
jQuery("#olor_box_"+i).attr('opt',i).css('background',color);
}
});
jQuery("div.color_box").live('click',function(){
jQuery(color_box_inUse).removeClass("color_box_chosen");
jQuery(this).addClass("color_box_chosen");
var ii = jQuery(this).attr('opt');
jQuery("#attribute85 option:selected").removeAttr("selected");
jQuery("#attribute85 option:nth-child("+ii+")").attr("selected", "selected");
var d = jQuery("#attribute85 option:nth-child("+ii+")").text();
color_box_inUse = "#"+jQuery(this).attr('id');
});
</script>
После выполнения:
<div class="input-box">
<select name="super_attribute[85]" id="attribute85" class="required-entry super-attribute-select">
<option value="">Выберите вариант...</option>
<option value="8" price="60">Black +60.00 ₴</option>
<option value="13" price="40">Green +40.00 ₴</option>
<option value="10" price="20">RoyalBlue +20.00 ₴</option>
<option value="9" price="10">White +10.00 ₴</option>
<option value="6" price="25">Yellow +25.00 ₴</option>
</select>
<div id="olor_box_2" class="color_box" opt="2" style="background-color: black; "></div>
<div id="olor_box_3" class="color_box" opt="3" style="background-color: green; "></div>
<div id="olor_box_4" class="color_box" opt="4" style="background-color: rgb(65, 105, 225); "></div>
<div id="olor_box_5" class="color_box" opt="5" style="background-color: white; "></div>
<div id="olor_box_6" class="color_box" opt="6" style="background-color: yellow; "></div>
</div>
То-есть после просто выбирает элементы списка, формирует элементы и надает им событие, которое должно имитировать работу с данным списком. Но поскольку к списку системой прикручен слушатель все операции перелавливает он и мой алгоритм не работает. А мне нужно чтобы работало. Чтобы при щелчках по элементах он реагировал так будто мы работаем со списком.
Скрин с примитивной схемой: