Стоит задача кастомизировать select option.
<div class="ty-price-slider__filter-prefix">{$filter.prefix nofilter}</div>
<select class="ms-max-select ty-price-slider__input-text hidden-select" name="right_{$filter_uid}"
id="slider_{$filter_uid}_right"
{if $disable_slider}
disabled="disabled"
{/if}
data-ca-previous-value="{$right} {$filter.suffix nofilter}"
>
{for $i = $min to $max}
<option value="{$i}" {if $filter.current_right == $i}selected{/if}>{$i} {$filter.suffix nofilter}</option>
{/for}
</select>
</div >
Выглядит сейчас вот так
Пробовал через скрытие его и привязки
<div class="custom-select-display">Выберите опцию</div>
<ul class="custom-select-options hidden">
{foreach from=$options item=option}
<li class="custom-option" data-value="{$option.value}">{$option.label}</li>
{/foreach}
</ul>
<div>
$(document).ready(function () {
// Переключение видимости кастомного списка при клике на "display"
$(document).on('click', '.custom-select-display', function () {
$(this).siblings('.custom-select-options').toggleClass('hidden');
});
// Обработка клика по элементу кастомного списка
$(document).on('click', '.custom-select-options .custom-option', function (event) {
var selectedText = $(this).text();
var selectedValue = $(this).data('value');
// Обновляем отображаемый текст
$(this).closest('.custom-select-container').find('.custom-select-display').text(selectedText);
// Находим скрытый select и обновляем его значение
var $hiddenSelect = $(this).closest('.custom-select-container').find('.hidden-select');
$hiddenSelect.val(selectedValue).trigger('change'); // Триггерим событие change для обработки CS-Cart
// Закрываем кастомный список
$(this).parent().addClass('hidden');
});
// Закрытие списка при клике вне его
$(document).on('click', function (e) {
if (!$(e.target).closest('.custom-select-container').length) {
$('.custom-select-options').addClass('hidden');
}
});
});
Но что-то не заводится совсем. Вообще ни выпадушка не работftn, ни отправляется ничего. Совсем видимо не понимаю как это работает. Есть у кого-то опыт?