С Новым годом! Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
8 / 5 / 3
Регистрация: 13.02.2013
Сообщений: 294

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

15.01.2018, 00:19. Показов 1449. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток, есть таблица:
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 минуты
Никто не подскажет?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
15.01.2018, 00:19
Ответы с готовыми решениями:

Как привязать кнопку к внешнему скрипту .js?
Здравствуйте, есть внешний скрипт случайной картинки, как сделать так, чтобы при нажатии кнопки происходила генерация? Код скрипта: ...

Присвоить несколько значений одному option из select
Всем здрасти, в js не очень то я, поэтому нужна помощь. Есть два combobox: combobox1 и combobox2. В combobox1 есть множество option с...

Как к одному клиенту привязать несколько записей.
Здравствуйте. Только начинаю осваивать access и пытаюсь составить базу данных для своей работы (ветеринарный кабинет). Нужно к одному...

7
27 / 26 / 11
Регистрация: 19.06.2014
Сообщений: 158
15.01.2018, 00:24
JavaScript
1
$('select[name^=filter]').change(function () {
0
8 / 5 / 3
Регистрация: 13.02.2013
Сообщений: 294
15.01.2018, 13:49  [ТС]
jasper-blondin, не сильно понял чем отличается
0
27 / 26 / 11
Регистрация: 19.06.2014
Сообщений: 158
15.01.2018, 13:57
Kurtis, в Вашем определена привязка к конкретному селекту с именем "filter":
JavaScript
1
 $('select[name=filter]')
Если Вы хотите, чтобы фильтр работал с другим селектом, нужно продублировать фильтр для этого другого селекта (в данном случае, селект с именем "filterС").
Либо, сделать выборку более универсальной. Что я и сделал.
Теперь jQuery будет искать не просто селекты с именем "filter", а все селекты, у которых имя начинается с "filter". Т.е. в выборку попадет и селект с именем "fitlerC".
Более того, если Вы добавите на страницу новый селек с именем, к примеру, "filterD", то он также автоматически подхватится фильтром.
0
8 / 5 / 3
Регистрация: 13.02.2013
Сообщений: 294
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();
        }
0
27 / 26 / 11
Регистрация: 19.06.2014
Сообщений: 158
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();
            }
        });
    });
});
Проверьте. Потому что я писал на коленке.
0
8 / 5 / 3
Регистрация: 13.02.2013
Сообщений: 294
15.01.2018, 15:19  [ТС]
jasper-blondin, если я правильно понял в вашем примере всего один rowstohide(для idtrans), а как ещё добавить для idcompl?
0
27 / 26 / 11
Регистрация: 19.06.2014
Сообщений: 158
15.01.2018, 15:34
Kurtis, у Вас для каждого селекта еще и разные названия атрибутов заданы?
Тогда Вам нужно в самих селектах кроме target указывать еще и название атрибута, по которому будет происходить фильтрация. А в самом скрипте для каждого селекта (внутри .each()) получать это название атрибута и именно по нему определять, какие строки нужно показать.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.01.2018, 15:34
Помогаю со студенческими работами здесь

К одному BindingNavigator привязать несколько BindingSource
Здравствуйте, помогите пожалуйста, мне нужно к одному BindingNavigator привязать несколько BindingSource. Везде перерыл нигде путного не...

Как обратиться к одному скрипту из другого?
Монстрик получает урон, но в тело он получает 3 урона, в голову 5.... в руку 1 урон. На каждой части тела стоит свой скрипт, копящий в себе...

Как привязать 3 пункта к одному id
Привет всем смотрящим эту тему. Мне необходимо реализовать следующую схему: например я создал заявку вида ...

PHP привязать к скрипту баланс
Помогите пожалуйста как к &lt;p&gt;введите число от 1 до 2 &lt;form method=&quot;POST&quot;&gt; &lt;input type=&quot;number&quot; name=&quot;num&quot; &gt; ...

Как привязать два домена к одному сайту
Добрый день Хочу, чтобы второй домен тоже ссылался на один и тот же сайт. Как это сделать куда и что нужно прописать?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Новый 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. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru