Для преобразования вашего кода так, чтобы выбор категории был оформлен в виде выпадающего списка (<select>), нужно заменить структуру таблицы на соответствующую структуру <select> и <option>
Вместо таблицы используем <select> с тегами <option> для каждого элемента категории:
<select class="mod-board-select" index="<?php echo $this->index ?>">
<?php foreach($this->cat_ar as $cat_id => $cat_title): ?>
<option value="<?php echo $cat_id; ?>" <?php if(isset($this->count_ar[$cat_id])) echo 'data-icon="true"'; ?>>
<?php echo $cat_title; ?>
</option>
<?php endforeach; ?>
</select>
Изменение JavaScript:
Теперь нужно изменить JavaScript, чтобы он обрабатывал выбор в выпадающем списке:
$(document).ready(function() {
$('.mod-board-select').on('change', function() {
var $select = $(this);
var index = $select.attr("index");
var cat_id = $select.val(); // Получаем выбранное значение категории
if (!cat_id) {
return true;
}
$.ajax({
url: '<?php echo $this->link_aj_select ?>' + cat_id + "&index=" + index,
error: function() {
alert("<?php echo Lng::_('Во время получения данных возникла ошибка') ?>");
},
beforeSend: function() {
// Добавляем лоадер (если нужно)
$select.addClass('r-icon-loading');
// Очищаем старые выделенные пункты
$("#mod_board-cat_list table[index='" + index + "']").remove();
},
success: function(d) {
$select.removeClass('r-icon-loading').addClass('r-icon-arrow');
$("#mod_board-cat_list").append(d);
}
});
return false;
});
});
В HTML:
Структура таблицы заменена на теги <select> и <option>.
В опциях выводится ID и название категорий, при этом для категорий с иконкой добавляется атрибут data-icon="true", который вы можете использовать для отображения иконок (если это необходимо).
В JavaScript:
используем событие change, чтобы отслеживать выбор в выпадающем списке.
Получаем выбранное значение через $select.val().
Таким образом, вместо таблицы с категориями теперь используется выпадающий список, и логика работы с категориями сохраняется.