0

Доброго времени суток.

На странице есть

<div class="form-select" id="0">
<select name="select-category" id="select-category" onchange="selectCategory(this.id)">
...
</select>

В него выгружаются главные категории. При выборе одной из них - я передаю значение на сервер через ajax, и после получения json - создаю ещё один селектор (в этом селекторе дочерние категории), помещенный в такой же div, но с значением атрибута id больше на единицу и т.д.

При изменении выбора в select на любом уровне, я получаю атрибут id у .form-select, в который он завернут, после чего прохожусь по всем .form-select, и если у них id больше, то удаляю их.

 ...
 var parent = $('#' + name_id_category).parent();
 var parent_id = parent.attr('id');
 
 $('.form-select').each(function (i) {
     if (parseInt($('.form-select')[i].attributes.id.value) > parent_id) {
     $('.form-select')[i].remove();
     }
 });
 ...

Но это работает не правильно. После выбора нескольких категорий (на странице 4 селектора), я меняю самый первый из них, удаляются все, кроме предпоследнего, в консоли ошибка:

Uncaught TypeError: Cannot read property 'attributes' of undefined

P.S. Уже очень долго парюсь над этим и конкретно так встрял. Возможно мое решение в целом неудачное, буду рад совету и помощи. Заранее спасибо.

1 ответ 1

1

во-первых, перестаньте писать костыли вида onchange в html-коде. jquery явно не для этих целей создавался, а чтобы наоброт оделить js от верстки.
во-вторых, ваши номера в id это по сути данные, а не идентификатор. Вот и используйте для хранения data- атрибуты. То есть:

<div class="form-select" data-id="0">

дайте всем своим селектам класс .select-category
добавьте обработчик стандартным для jquery путем

$(document).on('change', '.select-category', function(){
    ...
});

где вместо document вы используете ближайшего подходящего общего предка для всех ваших селектов.

Далее при смене селекта берете ближайший .form-select и его id и фильтруете все, что не подходит по условию. затем удаляете.

let fsId = $(this).closest('.form-select').data('id');
$('.form-select').filter(function(el){ 
                     return $(el).data('id') > fsId; 
                  })
                 .remove();

в принципе не было бы ошибкой, наверное, и просто удалить все подходящие, которые стоят позже в DOM, вроде такого

let idx = $(".form-select").index($(this));
$(".form-select").gt(idx).remove(); 
1
  • Спасибо за ответ. Завтра перепишу по вашему совету и отпишу сюда - что получилось. Пока, временно, смог исправить свою проблему немного другим путем.
    – Anon
    1 дек 2020 в 22:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.