Как привязать к одному js скрипту несколько select

@Kurtis · Регистрация: 13.02.2013

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

Доброго времени суток, есть таблица:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<table name="TableCar" align="center">
                    <h3 align="center">Учет комплектаций в автосалоне</h3>
                    <thead>
                        <tr>
                            <th>Тип авто.</th>
                            <th>Модель</th>
                            <th>Тип кузова</th>
                            <th>Комплектация</th>
                            <th>Тип привода</th>
                            <th>Коробка пер.</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr idtrans="@item.idTrans", idcompl="@item.idCompl">
                                <td>
                                    @Html.DisplayFor(modelview => item.nameTypeCar)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelview => item.nameModel)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelview => item.nameBodyType)
                                </td>
                                <td align="center">
                                    @Html.DisplayFor(modelview => item.nameComplectation)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelview => item.nameDrive)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelview => item.nameTransmission)
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

Есть два селекта, которые выступают в роли фильтров
select 1

HTML5
1
2
3
4
5
6
7
 <select name="filter" target="TableCar">
                        <option value="0">Все</option>
                        @foreach(MyCourseProject.Models.transmission i in ViewBag.car)
                        {
                            <option value="@i.id">@i.name_transmission</option>
                        }  
                    </select>

select 2

HTML5
1
2
3
4
5
6
7
                    <select name="filterС" target="TableCar">
                        <option value="0">Все</option>
                        @foreach (MyCourseProject.Models.complectation i in ViewBag.trans)
                        {
                            <option value="@i.id">@i.name_complectation</option>
                        }
                    </select>

А так же JS с помощью которого осуществляется фильтрация:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function () {
    $('select[name=filter]').change(function () {
        var element = $(this);
        var targetName = element.attr('target');
        var selectedId = element.val();
        var tableBody = $('[name=' + targetName + ']').find('tbody');
        tableBody.find('tr').show();
        if (selectedId != 0) {
            var rowsToHide = tableBody.find('tr[idtrans!=' + selectedId + ']');
            rowsToHide.hide();
        }
    });
});

Вопрос, как несколько select привязать к JS скрипту?

Добавлено через 2 часа 42 минуты
Никто не подскажет?

@jasper-blondin · 15.01.2018, 00:24

JavaScript
1
$('select[name^=filter]').change(function () {

@Kurtis · 15.01.2018, 13:49 **[ТС]**

jasper-blondin, не сильно понял чем отличается

@jasper-blondin · 15.01.2018, 13:57

Kurtis, в Вашем определена привязка к конкретному селекту с именем "filter":

JavaScript
1
 $('select[name=filter]')

Если Вы хотите, чтобы фильтр работал с другим селектом, нужно продублировать фильтр для этого другого селекта (в данном случае, селект с именем "filterС").
Либо, сделать выборку более универсальной. Что я и сделал.
Теперь jQuery будет искать не просто селекты с именем "filter", а все селекты, у которых имя начинается с "filter". Т.е. в выборку попадет и селект с именем "fitlerC".
Более того, если Вы добавите на страницу новый селек с именем, к примеру, "filterD", то он также автоматически подхватится фильтром.

@Kurtis · 15.01.2018, 14:09 **[ТС]**

jasper-blondin, а как добавлять новые колонки для фильтрации, сейчас так:

JavaScript
1
2
3
4
if (selectedId != 0) {
            var rowsToHide = tableBody.find('tr[idtrans!=' + selectedId + ']');
            rowsToHide.hide();
        }

А для нескольких так:

JavaScript
1
2
3
4
5
6
  if (selectedId != 0) {
            var rowsToHide = tableBody.find('tr[idtrans!=' + selectedId + ']');
            rowsToHide.hide();
            var rowsToHide1 = tableBody.find('tr[idcompl!=' + selectedId + ']');
            rowsToHide1.hide();
        }

@jasper-blondin · 15.01.2018, 14:30

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function () {
    $('select[name^=filter]').change(function () {
        var element = $(this);
        var targetName = element.attr('target');
        var $selects = $('select[target=' + targetName + ']');
 
        var tableBody = $('[name=' + targetName + ']').find('tbody');
        tableBody.find('tr').hide();
 
        $selects.each(function () {
            var selectedId = $(this).val();
            if (selectedId != 0) {
                var rowsToHide = tableBody.find('tr[idtrans=' + selectedId + ']');
                rowsToHide.show();
            }
        });
    });
});

Проверьте. Потому что я писал на коленке.

@Kurtis · 15.01.2018, 15:19 **[ТС]**

jasper-blondin, если я правильно понял в вашем примере всего один rowstohide(для idtrans), а как ещё добавить для idcompl?

@jasper-blondin · 15.01.2018, 15:34

Kurtis, у Вас для каждого селекта еще и разные названия атрибутов заданы?
Тогда Вам нужно в самих селектах кроме target указывать еще и название атрибута, по которому будет происходить фильтрация. А в самом скрипте для каждого селекта (внутри .each()) получать это название атрибута и именно по нему определять, какие строки нужно показать.

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом 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 . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@Kurtis 8 / 5 / 3 Регистрация: 13.02.2013 Сообщений: 294
	15.01.2018, 13:49 [ТС]
	jasper-blondin, не сильно понял чем отличается 0

@Kurtis 8 / 5 / 3 Регистрация: 13.02.2013 Сообщений: 294
	15.01.2018, 15:19 [ТС]
	jasper-blondin, если я правильно понял в вашем примере всего один rowstohide(для idtrans), а как ещё добавить для idcompl? 0

@jasper-blondin 27 / 26 / 11 Регистрация: 19.06.2014 Сообщений: 158
	15.01.2018, 15:34
	Kurtis, у Вас для каждого селекта еще и разные названия атрибутов заданы? Тогда Вам нужно в самих селектах кроме target указывать еще и название атрибута, по которому будет происходить фильтрация. А в самом скрипте для каждого селекта (внутри .each()) получать это название атрибута и именно по нему определять, какие строки нужно показать. 0