dim565
Искусственный Интеллект
(424764)
8 лет назад
Напишу в общем виде.
На том сайте option select выводится через html или php, но он не отображается посетителю (display: none), а формируется в этом стильном виде при помощи jquery скрипта (если не ошибаюсь, то вот этим plugins.jquery.com/ui.selectmenu).
Добавление картинок в список тоже сделано скриптом (похоже самописным). В скрытом select изначально содержатся адреса картинок для каждого пункта (data-icon). Например:
option value="Антроцит" data-id="1" data-icon="i/step9/1.png">Антроцит (data-icon содержит путь до мини-картинки).
А скрипт (autoretail.ru/js/main.js) делает так:
$('', {
css: {'backgroundImage': 'url('+item.element.data('icon')+')'}
})
.appendTo(li);
Фото товара при смене категории сделано тоже скриптом main.js.
В каждом select содержится data-id, который затем будет использоваться как путь картинок.
Скрипт делает так:
var confUpdate = function(){
var step2_id = $('select[name="step[2]"] option:selected').data('id');
var step3_id = $('select[name="step[3]"] option:selected').data('id');
var step4_id = $('select[name="step[4]"] option:selected').data('id');
var step5_id = $('input[name="step[5]"]:checked').data('id');
step5_id = (step5_id != 2) ? 1 : 2;
$('.step-9 img.s-2').attr('src', 'i/step9/2/'+step5_id+'/'+step2_id+'/'+step4_id+'.png');
$('.step-9 img.s-3').attr('src', 'i/step9/3/'+step3_id+'.png');
$('.step-9 img.s-3-2').attr('src', 'i/step9/3-2/'+step3_id+'.png');
$('.step-9 img.s-4').attr('src', 'i/step9/4/'+step4_id+'.png');
т. е добавляет к фото товара четыре картинки в зависимости от выбора (они накладываются друг на друга, это уже сделано в CSS)