Как привязать к одному 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()) получать это название атрибута и именно по нему определять, какие строки нужно показать.

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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 с разными данными.	Новый ноутбук 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. . .

@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