@Myu2

Почему select отображает пустые поля записей после их удаления?

На моей страничке есть select с большим списком значений(option). Также есть текстовое поле быстрого поиска(filter), т.е по вводу текста, select соответсвующим образом перегружается и в нем остаются только option-ы, удовлетворяющие введенному тексту, все оставшиеся option-ы выделяются. Значения селекта хранятся в массиве values[] размером size, для того, чтобы по мере стирания filter-а в селект обратно добавлялись option-ы.

var select = document.getElementById("select");
var filter = document.getElementById("filter");
select.empty();
for (var i = 0; i < size; i++) 
    {
        var value = values[i].toLowerCase();
        if ((value.indexOf(filter)) + 1) 
        {
            var opt = document.createElement("option");
            opt.innerHTML = value;
            opt.value = value;
            opt.id = i;
            select.appendChild(opt);
        }
    }
$("#project option").attr("selected", "true");


Проблема в том, что если выделить элемент в конце списка при пустом фильтре, а после этого ввести в фильтр значение, то селект отсеется правильно, но покажет будто бы в нем нет значений, значения покажутся, только если переместить скролер вверх. Поведение похоже на такое, что берется фокус на выделенный элемент, производятся операции, но после этогго селект не обновляется
  • Вопрос задан
  • 2693 просмотра
Решения вопроса 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Я понимаю, когда динамически формируются недостающие элементы, но стирать и по новой удалять уже существующие? Можно проходить и удалять/добавлять класс, управляющий display:none.

В другом варианте, даже если создавать на лету, то нужно кэшировать результат построения. И не менять option внутри select, а просто целиком вставлять сформированный select, удаляя при этом предыдущий. При этом очищать контейнер от select только с помощью removeChild (remove), и никогда с помощью innerHTML (html).
Ответ написан
lexxpavlov
@lexxpavlov
Программист, преподаватель
поможет ivaynberg.github.io/select2 - самый первый пример в The Basics (второй input)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Myu2 Автор вопроса
Upd.
Обнаружилось, что так ведет себя только Chrome, IE и FF работают нормально.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы