1

Как в этом фильтре из селектов сделать два радио переключения чтоб всё работало также?https://codepen.io/oleg-z-zin/pen/wvaBPLe Помогите плиз

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" id="filter-criteria">
<select id="filter-select">
  <option value="pq">Первый зал</option>
  <option value="pw">Второй зал</option>
</select>
<select id="filter-select2">
  <option value="all">14 число</option>
  <option value="pyzt">15 число</option>
</select>
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>



jQuery(document).ready(function() {

  $('#filter-criteria').add('#filter-select').add('#filter-select2').on('keyup change', function() {
    $('.item').hide();
    var txt = $('#filter-criteria').val();
    var select = $('#filter-select').val();
    var select2 = $('#filter-select2').val();

    select = select == "all" ? "item" : select;
    select2 = select2 == "all" ? "item" : select2;
    txt = txt == "" ? "item" : txt;
    $('.item').each(function() {
      var $this = $(this)
      if ($this.is('[class*=' + txt + ']') && $this.is('[class*=' + select + ']') && $this.is('[class*=' + select2 + ']')) {
        $this.show();
      }
    });
  });

  $('#filter-select').val("pq");
  $('#filter-select2').val("chet").change();

});
5
  • Вы уже попробовали это сделать?
    – user176262
    9 фев 2020 в 15:22
  • пробовал. Но не работает. Надо переписать js код видимо. А я js не оч знаю... 9 фев 2020 в 15:30
  • @ЗюзинPLAY объясните какие 2 радио переключения хотите сделать и чтобы работало как?
    – Denis640Kb
    9 фев 2020 в 16:34
  • @Denis640Kb там есть два селекта день и * число*. К примеру я хочу, чтобы Слева были переключатели * либо первый день, либо второй (радио кнопками)* а справа чтоб были переключатели * либо 14 число, либо 15 ( тоже радио кнопками)* 9 фев 2020 в 16:54
  • тоже самое что и сейчас. только чтоб выбор был радио кнопками. Получается два фильтра. Первый фильтр это день. Второй фильтр это число. 9 фев 2020 в 16:56

1 ответ 1

3

    jQuery(document).ready(function () {
        $('.item').hide();

        var val = [1];

        $('#rad1').change(function () {
            if ($('#rad1').prop('checked', true)){
                $('#rad2').prop('checked', false);
                val[0] = 1;
            }
        });
        $('#rad2').change(function () {
            if ($('#rad2').prop('checked', true)){
                $('#rad1').prop('checked', false);
                val[0] = 2;
            }
        });
        $('#rad3').change(function () {
            if ($('#rad3').prop('checked', true)){
                $('#rad4').prop('checked', false);
                val[1] = 1;
            }
        });
        $('#rad4').change(function () {
            if ($('#rad4').prop('checked', true)){
                $('#rad3').prop('checked', false);
                val[1] = 2;
            }
        });
        $('.rad1').change(function () {
            $('.item').hide();
            if (val[1] == undefined){
                if (val[0] == 1){
                    $('.pq.chet.item').show();
                    $('.pq.pyzt.item').show();
                } else if (val[0] == 2){
                    $('.pw.chet.item').show();
                    $('.pw.pyzt.item').show();
                }
            } else {
                if (val[0] == 1){
                    if(val[1] == 1){
                        $('.pq.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pq.pyzt.item').show();
                    }
                } else if (val[0] == 2){
                    if(val[1] == 1){
                        $('.pw.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pw.pyzt.item').show();
                    }
                }
            }
        })

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="rad1" id="rad1">Первый зал
<input type="radio" class="rad1" id="rad2">Второй зал
<input type="radio" class="rad1" id="rad3">14
<input type="radio" class="rad1" id="rad4">15
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>

Вариант с выбранным параметром "Первый зал - 14 число"
Так же добавил при первом выборе - сброс, чтобы можно было выбирать все дни по залу до выбора второго типа селекта.

    jQuery(document).ready(function () {
        $('.item').hide();

        var val = [1];

        $('.pq.chet.item').show();
        $('#rad1').prop('checked', true);
        $('#rad3').prop('checked', true);
        $('#rad1').change(function () {
            if ($('#rad1').prop('checked', true)){
                $('#rad2').prop('checked', false);
                $('#rad3').prop('checked', false);
                val[0] = 1;
            }
        });
        $('#rad2').change(function () {
            if ($('#rad2').prop('checked', true)){
                $('#rad1').prop('checked', false);
                $('#rad3').prop('checked', false);
                val[0] = 2;
            }
        });
        $('#rad3').change(function () {
            if ($('#rad3').prop('checked', true)){
                $('#rad4').prop('checked', false);
                val[1] = 1;
            }
        });
        $('#rad4').change(function () {
            if ($('#rad4').prop('checked', true)){
                $('#rad3').prop('checked', false);
                val[1] = 2;
            }
        });
        $('.rad1').change(function () {
            $('.item').hide();
            if (val[1] == undefined){
                if (val[0] == 1){
                    $('.pq.chet.item').show();
                    $('.pq.pyzt.item').show();
                } else if (val[0] == 2){
                    $('.pw.chet.item').show();
                    $('.pw.pyzt.item').show();
                }
            } else {
                if (val[0] == 1){
                    if(val[1] == 1){
                        $('.pq.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pq.pyzt.item').show();
                    }
                } else if (val[0] == 2){
                    if(val[1] == 1){
                        $('.pw.chet.item').show();
                    } else if (val[1] == 2){
                        $('.pw.pyzt.item').show();
                    }
                }
            }
        })

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="rad1" id="rad1">Первый зал
<input type="radio" class="rad1" id="rad2">Второй зал
<input type="radio" class="rad1" id="rad3">14
<input type="radio" class="rad1" id="rad4">15
<hr>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>
<div class="pq chet item">первый зал 14 число</div>


<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>
<div class="pq pyzt item">первый зал 15 число</div>

<div class="pw chet item">второй зал 14 число</div>
<div class="pw chet item">второй зал 14 число</div>

<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>
<div class="pw pyzt item">второй зал 15 число</div>

5
  • Вот это круто. Прям от души, спасибо) Есть еще вопросик.. а как сделать чтоб по умолчанию было выбрано первый зал и 14 число при перезагрузке страницы? Извиняюсь за вопрос конечно.. Вы и так тут написали целый скрипт. 9 фев 2020 в 19:29
  • @ЗюзинPLAY добавил второй вариант в ответ снизу. При первом выборе добавил сброс, чтобы можно было по залу выбрать все дни.
    – Denis640Kb
    9 фев 2020 в 19:52
  • спасибо большое!! 9 фев 2020 в 20:33
  • Заметил баг. После перезагрузки страницы, если нажать на 15 число - ничего не происходит 9 фев 2020 в 21:04
  • @ЗюзинPLAY исправил.
    – Denis640Kb
    9 фев 2020 в 21:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.