Показать/скрыть большое колличество option внутри select

@game_Racer · Регистрация: 06.04.2013

Студворк — интернет-сервис помощи студентам

Нужно реализовать фильтр в select по первой букве с помощью стандартных кнопок.
Сделал так:

JavaScript
1
2
3
4
5
function onShowBlock(id) {
$("select[name='group_id'] option").removeAttr("selected");
$("select[name='group_id'] option[class='show']").removeClass('show').wrap(document.createElement("span")).parent().hide();
$("select[name='group_id'] option[id="+id+"]").addClass('show').unwrap();
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<p>Фильтр по первой букве:</p>
 <p><input type="button" id="l" onclick="onShowBlock(this.id, this.checked);" value="L"> 
   <input type="button" id="i" onclick="onShowBlock(this.id, this.checked);" checked value="I"> 
   <input type="button" id="d" onclick="onShowBlock(this.id, this.checked);" checked value="D"> 
   <input type="button" id="s" onclick="onShowBlock(this.id, this.checked);" checked value="S"></p>
<p>select</p>
<select name="group_id" size="1" >
<option>&nbsp;</option>
<option id="l" class="show" value="lorem">Lorem</option>
<option id="d" class="show" value="dolor">Dolor</option>
<option id="i" class="show" value="ipsum">Ipsum</option>
<option id="s" class="show" value="sit">Sit amet</option>
<option id="l" class="show" value="lorem">Lorem1</option>
<option id="d" class="show" value="dolor">Dolor1</option>
<option id="i" class="show" value="ipsum">Ipsum1</option>
<option id="s" class="show" value="sit">Sit amet1</option>
<option id="l" class="show" value="lorem">Lorem2</option>
<option id="d" class="show" value="dolor">Dolor2</option>
<option id="i" class="show" value="ipsum">Ipsum2</option>
<option id="s" class="show" value="sit">Sit amet2</option>
</select>

Все работает, но когда внутри select несколько тысяч option изрядно тормозит и вешает браузер. Может через массивы будет быстрее, но я с js познакомился на прошлой неделе, а то что выше написал по подсказкам гугла.

@ostgals · 06.04.2013, 23:55

При таких объемах нужно стремиться делать как можно меньше операций с элементами DOM. В вашем случае можно ограничиться лишь скрытием/показом соответствующего <option>.

Если сохранить ссылки на все <option> в одном массиве, то при клике на кнопку достаточно будет один раз пробежаться по нему и скрыть/показать нужные элементы:

JavaScript
1
2
3
4
        allOpts.each(function(){
            var val = $(this).attr('value');
            $(this).toggle(val.length && val[0] == letter);
        });

Вот рабочий пример: http://jsfiddle.net/LBpyx/1/

На очень скромном компьютере пробег по массиву в 3 тысячи <option> занимает не более четверти секунды.

@game_Racer · 07.04.2013, 20:29 **[ТС]**

ostgals, Огромное спасибо.

Добавлено через 6 часов 16 минут
ostgals, Показать/скрыть нельзя. Не во всех браузерах работает.

@ostgals · 07.04.2013, 21:08

Сообщение от game_Racer

Не во всех браузерах работает.

Вы правы. Тот же IE не позволяет скрыть <option>. Тогда можете удалять ненужные из <select> при этом не разрушая их. Вот пример:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    $('button').click(function(){
        var letter = $(this).text().toLowerCase();
        
        // выкидываем все из DOM и присоединяем обратно только нужные
        allOpts.detach().each(function(){
            var val = $(this).attr('value');
            if (val == '' || val[0] == letter) $(this).appendTo(select);
        });
        
        select.val('');
    });

Тоже получается быстро: http://jsfiddle.net/LBpyx/4/

@game_Racer · 07.04.2013, 21:30 **[ТС]**

Вот теперь то, что надо. Спасибо еще раз.

Новые блоги и статьи Все статьи Все блоги /
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.

@game_Racer 0 / 0 / 0 Регистрация: 06.04.2013 Сообщений: 9
	07.04.2013, 20:29 [ТС]
	ostgals, Огромное спасибо. Добавлено через 6 часов 16 минут ostgals, Показать/скрыть нельзя. Не во всех браузерах работает. 0

@game_Racer 0 / 0 / 0 Регистрация: 06.04.2013 Сообщений: 9
	07.04.2013, 21:30 [ТС]
	Вот теперь то, что надо. Спасибо еще раз. 0

Опции темы