Таблица категорий

[rintik]

Здравствуйте. Я новичок в сфере программирования, можно сказать самоучка. Скачиваю скрипты и многое другое и переделываю, просматриваю что как работает и так вот учусь. Вот столкнулся с одной проблемой. Скачал скрипт и там выбор категории оформлен в виде таблицы и адаптировать его не удается. Хочу в <select> обернуть, не получается. Помогите пожалуйста, если это возможно. Вот код:

 

<table class="mod-board-select" index="<?php echo $this -> index ?>">
    <?php foreach($this -> cat_ar as $cat_id => $cat_title): ?>
    <tr >
        <?php if(isset($this -> count_ar[$cat_id]))): ?>
        <td>
            <div class="r-icon-add">
                <?php echo Helper_HTML::anchor('', $ cat_title, array('cat_id' => $cat_id, 'icon' => TRUE)) ?>
            </div>
        </td>
        <?php else: ?>
        <td>
            <?php echo Helper_HTML::anchor($ this -> link_cat.$cat_id, $cat_title) ?>
        </td>
        <?php endif; ?>
    </tr>
    <?php endforeach; ?>
</table>

 

А это javascript код к нему:

 

$(document).ready(function()
{
    $('.mod-board-select .r-icon-add a').live('click', function()
    {
        $div = $(this).parent();
        $tr = $(this).parents('tr');
        index = $tr.parents('table').attr("index");

 

             /*В том случае если мы кликнули по обычной ссылке, выходим с ф-и*/
        if($(this).attr('cat_id') === false)
        {
            return true;
        }
        
        $.ajax(
        {
            url: '<?php echo $this -> link_aj_select ?>' + $(this).attr('cat_id') + "&index=" + index,
            error:function(d)
            {
                alert("<?php echo Lng::_('Во время получения данных возникла ошибка') ?>")
            },
            beforeSend: function()
            {

 

             /*Удаляем плюсик и добавляем лоадер*/
                $div.addClass('r-icon-loading');

 

                /*Удаляем старые выделенные пункты и выделяем новый, текущий пункт*/
                $tr.parent().find("tr").removeClass('r-select');
                $tr.addClass('r-select');
                
                    /*Удаляем все стрелочки*/
                $tr.parent().find("div").removeClass('r-icon-arrow');
                

               /*Удаляем все таблицы следующие за той по ссылке которой кликнули*/
                var length = $("#mod_board-cat_list table").length;
                for(var i = 1; i <= length; i++)
                {
                    if(i > index)
                    {
                        $("#mod_board-cat_list").find("table[index='" + i + "']").remove();
                    }
                }
            },
 

                         success: function(d)
            {
                $div.removeClass('r-icon-loading').addClass('r-icon-arrow');
                $("#mod_board-cat_list").append(d);
            }
        });
        return false;
    });
});

Извиняюсь если что не так

Змінено 12 вересня користувачем rintik
Неправильно написал код

[Seofisher]

Для преобразования вашего кода так, чтобы выбор категории был оформлен в виде выпадающего списка (<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().

Таким образом, вместо таблицы с категориями теперь используется выпадающий список, и логика работы с категориями сохраняется.

[Etegro]

13.09.2024 в 12:35, Seofisher сказал:

Для преобразования вашего кода так, чтобы выбор категории был оформлен в виде выпадающего списка (<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().

Таким образом, вместо таблицы с категориями теперь используется выпадающий список, и логика работы с категориями сохраняется.

ChatGPT? )

[Seofisher]

13.09.2024 в 14:05, Etegro сказал:

ChatGPT?

да)