Динамические списки jQuery
233
07 февраля 2020, 05:00
Всем привет!
На сайте есть фильтр, нужно сделать его динамическим дабы избежать пустых запросов от пользователя.
С таблицы я беру массивы со значениями data-text и data-value
Используя эти массивы нужно перестраивать списки в зависимости от выбранного элемента, не затрагивая при этом тот список, в котором был сделан выбор.
В гугле ничего толкового по этому поводу найти не удалось, если у кого-нибудь есть время и не лень помочь, буду безумно признателен.
Заранее спасибо!
P.S.
Если вдруг я криво объяснил суть задачи, то вот на этом сайте яркий пример работы подобного фильтра https://torgteh.com/poisk-truby-na-sklade/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style type="text/css">
td,th{
text-align: center;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div>
<div class="view view-prod-catalog view-id-prod_catalog view-display-id-page view-dom-id-f10a4fb78a682e8d61c1426c4e10f1b3 jquery-once-4-processed">
<div class="view-filters">
<form action="/catalog" method="get" id="views-exposed-form-prod-catalog-page" accept-charset="UTF-8" class="jquery-once-4-processed"><div><div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-field-diameter-tid-wrapper" class="views-exposed-widget views-widget-filter-field_diameter_tid">
<label for="edit-field-diameter-tid">
Диаметр, мм </label>
<div class="views-widget">
<div class="form-item form-type-select form-item-field-diameter-tid">
<select id="edit-field-diameter-tid" name="field_diameter_tid" class="form-select"><option value="All" selected="selected">- Любой -</option><option value="29">10</option><option value="33">14</option><option value="36">27</option></select>
</div>
</div>
</div>
<div id="edit-field-stal-tid-wrapper" class="views-exposed-widget views-widget-filter-field_stal_tid">
<label for="edit-field-stal-tid">
Сталь </label>
<div class="views-widget">
<div class="form-item form-type-select form-item-field-stal-tid">
<select id="edit-field-stal-tid" name="field_stal_tid" class="form-select"><option value="All" selected="selected">- Любой -</option><option value="27">08-12Х18Н10Т</option><option value="31">09Г2С</option><option value="34">40Х</option></select>
</div>
</div>
</div>
<div id="edit-field-stenka-tid-wrapper" class="views-exposed-widget views-widget-filter-field_stenka_tid">
<label for="edit-field-stenka-tid">
Стенка, мм </label>
<div class="views-widget">
<div class="form-item form-type-select form-item-field-stenka-tid">
<select id="edit-field-stenka-tid" name="field_stenka_tid" class="form-select"><option value="All" selected="selected">- Любой -</option><option value="28">1.5</option><option value="32">2.5</option><option value="35">4</option></select>
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-prod-catalog" name="" value="Применить"> </div>
</div>
</div>
</div></form> </div>
<div class="view-content">
<table class="views-table cols-5">
<thead>
<tr>
<th class="views-field views-field-title views-align-center" scope="col">
</th>
<th class="views-field views-field-field-diameter views-align-center" scope="col">
Диаметр, мм </th>
<th class="views-field views-field-field-stal views-align-center" scope="col">
Сталь </th>
<th class="views-field views-field-field-stenka views-align-center" scope="col">
Стенка, мм </th>
<th class="views-field views-field-field-nalichie views-align-center" scope="col">
Наличие, т </th>
</tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-title views-align-center">
<a href="/content/testovyy-produkt-4">Тестовый продукт 4</a> </td>
<td class="views-field views-field-field-diameter views-align-center">
<span data-value="36" data-text="27">27</span> </td>
<td class="views-field views-field-field-stal views-align-center">
<span data-value="27" data-text="08-12Х18Н10Т">08-12Х18Н10Т</span> </td>
<td class="views-field views-field-field-stenka views-align-center">
<span data-value="35" data-text="4">4</span> </td>
<td class="views-field views-field-field-nalichie views-align-center">
0.0020 </td>
</tr>
<tr class="even">
<td class="views-field views-field-title views-align-center">
<a href="/content/testovyy-produkt-3">Тестовый продукт 3</a> </td>
<td class="views-field views-field-field-diameter views-align-center">
<span data-value="36" data-text="27">27</span> </td>
<td class="views-field views-field-field-stal views-align-center">
<span data-value="34" data-text="40Х">40Х</span> </td>
<td class="views-field views-field-field-stenka views-align-center">
<span data-value="35" data-text="4">4</span> </td>
<td class="views-field views-field-field-nalichie views-align-center">
0.5060 </td>
</tr>
<tr class="odd">
<td class="views-field views-field-title views-align-center">
<a href="/content/testovyy-produkt-2">Тестовый продукт 2</a> </td>
<td class="views-field views-field-field-diameter views-align-center">
<span data-value="33" data-text="14">14</span> </td>
<td class="views-field views-field-field-stal views-align-center">
<span data-value="31" data-text="09Г2С">09Г2С</span> </td>
<td class="views-field views-field-field-stenka views-align-center">
<span data-value="32" data-text="2.5">2.5</span> </td>
<td class="views-field views-field-field-nalichie views-align-center">
0.0190 </td>
</tr>
<tr class="even views-row-last">
<td class="views-field views-field-title views-align-center">
<a href="/content/testovyy-produkt-1">Тестовый продукт 1</a> </td>
<td class="views-field views-field-field-diameter views-align-center">
<span data-value="29" data-text="10">10</span> </td>
<td class="views-field views-field-field-stal views-align-center">
<span data-value="27" data-text="08-12Х18Н10Т">08-12Х18Н10Т</span> </td>
<td class="views-field views-field-field-stenka views-align-center">
<span data-value="28" data-text="1.5">1.5</span> </td>
<td class="views-field views-field-field-nalichie views-align-center">
0.0039 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var diametr = new Array();
var stal = new Array();
var stenka = new Array();
var diametrId = new Array();
var stalId = new Array();
var stenkaId = new Array();
var resultDiametr = [];
var resultStal = [];
var resultStenka = [];
var resultDiametrId = [];
var resultStalId = [];
var resultStenkaId = [];
var obj1 = {};
var obj2 = {};
var obj3 = {};
var obj4 = {};
var obj5 = {};
var obj6 = {};
$(document).ready(function() {
$("table .views-field-field-diameter span").each(function(i){
diametr.push($(this).attr('data-text'));
});
$("table .views-field-field-stal span").each(function(i){
stal.push($(this).attr('data-text'));
});
$("table .views-field-field-stenka span").each(function(i){
stenka.push($(this).attr('data-text'));
});
$("table .views-field-field-diameter span").each(function(i){
diametrId.push($(this).attr('data-value'));
});
$("table .views-field-field-stal span").each(function(i){
stalId.push($(this).attr('data-value'));
});
$("table .views-field-field-stenka span").each(function(i){
stenkaId.push($(this).attr('data-value'));
});
});
$(document).ready(function() {
for(var i = 0; i < diametr.length; i++) {
obj1[diametr[i]] = diametr[i];
}
for(var i in obj1) {
resultDiametr.push(obj1[i])
}
return resultDiametr;
});
$(document).ready(function() {
for(var i = 0; i < diametrId.length; i++) {
obj4[diametrId[i]] = diametrId[i];
}
for(var i in obj4) {
resultDiametrId.push(obj4[i])
}
return resultDiametrId;
});
$(document).ready(function() {
for(var i = 0; i < stal.length; i++) {
obj2[stal[i]] = stal[i];
}
for(var i in obj2) {
resultStal.push(obj2[i])
}
return resultStal;
});
$(document).ready(function() {
for(var i = 0; i < stalId.length; i++) {
obj5[stalId[i]] = stalId[i];
}
for(var i in obj5) {
resultStalId.push(obj5[i])
}
return resultStalId;
});
$(document).ready(function() {
for(var i = 0; i < stenka.length; i++) {
obj3[stenka[i]] = stenka[i];
}
for(var i in obj6) {
resultStenka.push(obj3[i])
}
return resultStenka;
});
console.log(resultDiametr);
console.log(resultStal);
console.log(resultStenka);
console.log(resultDiametrId);
console.log(resultStalId);
console.log(resultStenkaId);
</script>
</body>
</html>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47914 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23900 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10005 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 26.3.2025 | 07:55