Блог

У меня есть страница, на которой показано множество divs, и мне нужно иметь возможность фильтровать их либо по строке запроса URL, либо по двум входным данным списка выбора.

У меня это работает, куда a он добавит ?dc=classnamehere, который затем показывает только divs с этим классом — jquery для этого ниже:

 <script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[[]]/g, "\$amp;");
        var regex = new RegExp("[?amp;]"   name   "(=([^amp;#]*)|amp;|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/ /g, " "));
    }
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');
 
     $(document).ready(function() {
 
        // Check if the URL parameter is apples
        if (dynamicContent == 'westbury') {
            $('.westbury').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'clifton') {
            $('.clifton').show();
        } 

        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('.listing-item').show();
        }
    });
</script>  

Что мне также нужно, так это возможность показывать / скрывать эти же divs с помощью двух списков выбора, как показано ниже, — оба также нацелены на классы.

                        <select id="area">
<option value="">Select Area</option>
    <option value="westbury">Westbury</option> 
    <option value="clifton">Clifton</option>
</select>
<select id="category">
    <option value="">Select Category</option>
    <option value="cafe">cafe</option>
    <option value="shop">shop</option>  
</select>
  

Итак, в принципе, если я посещу страницу, и в URL-адресе есть ?dc= classhere, мне будут показаны результаты для этого класса — тогда, если я выберу фильтр через список выбора, он может переопределить и показать / скрыть divs на основе этого.

Если в URL ничего не выбрано или не показано, то может быть показано все.

Заранее спасибо!