Показать/скрыть большое колличество 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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
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 с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@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