Динамические списки jQuery

194

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>