Php 如何基于3个选择框使用javascript创建可过滤列表

我需要一个方法来实现类似于这个网页上的东西

我会在页面上有一个品牌列表。每个品牌应有3条信息：

起始字母

商店（可以是多个）

类别（可以是多个）

因此，我需要3个选择框，当其中一个选择框被选中时，它将根据这一点过滤下面的品牌

我希望通过javascript在浏览器中进行过滤

所以我在想，我应该如何添加一些关于品牌的额外信息，然后从视图中删除所有不符合选择框标准的内容

你知道我怎样才能做到这一点吗

此外，我将使用wordpress和高级自定义字段来实现这一点，从后端进入品牌。我只是不知道从哪里开始

我是这么想的

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-category="Mens Wear, Shoes">Brand name</li>

        </ul>

    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-alpha="A" data-store="Arnotts,Dundrum" data-category="Womens Wear, Cosmetics" >A Brand Name</li>

        </ul>

    </div>

</div>

0-9

品牌名称

A.

品牌名称

但我不知道如何，我会在后端构建这个

=============已添加编辑========= 我想知道，后端不允许我分离与商店相关的类别。以下是香奈儿的一个例子，布朗·托马斯销售女装、鞋类、珠宝和配饰以及美容用品。阿诺茨只卖美女。Dundrum销售美容和配饰。我将如何实现这一点

我在想这样的东西可以用于布局，但我不知道javascript可以用于选择框

<div classs="brand-holder">

<div class="brand-column">
    <h3>A</h3>
    <ul class="brand-list">
        <li data-alpha="A" data-store="Arnotts,Dundrum,brownThomas" data-arnotts-category="Womens Wear, Cosmetics" data-dundrum-category="Womens Wear" data-brownThomas-category="Beauty" >A Brand Name <i>[store:Arnotts,Dundrum :: category: Womens Wear, Cosmetics]</i></li>
    </ul>
</div>

A.

品牌名称[商店：Arnotts，Dundrum:：category:女装，化妆品]

-==已添加编辑======

这就是目前在后端选择信息的方式

但我需要它，这样它就可以和这样的东西一起工作

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-category="Mens Wear, Shoes">Brand name</li>

        </ul>

    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-alpha="A" data-store="Arnotts,Dundrum" data-category="Womens Wear, Cosmetics" >A Brand Name</li>

        </ul>

    </div>

</div>

---

我会将这些类别作为CSS类， 为所有类别生成CSS规则， 然后更改父元素的CSS类

例如：

<div id="list" class="container all">
    <div class="item startletterA storeFoo categoryNice">
</div>

<style>
    container     .item { display: none; }
    container.all .item { display: block; }
    container.startletterA item.startletterA { display: block; }
    container.startletterB item.startletterB { display: block; }
    ...
    container.storeFoo item.storeFoo { display: block; }
    container.storeBar item.storeBar { display: block; }
    ...
</style>

<select type="radio" onclick="$('list').replaceClass('startletter*', 'startletterA');"/>

container.item{display:none；}
container.all.item{display:block；}
container.starttetra item.starttetra{display:block；}
container.startterb item.startterb{display:block；}
...
container.storeFoo item.storeFoo{display:block；}
container.storeBar item.storeBar{display:block；}
...

replaceClass（）

可能不存在，但实现起来并不困难

---

与基于JavaScript（jQuery）的解决方案相比，该解决方案的优势在于速度要快得多。使用数千项进行尝试。

创建一个多维JavaScript数组，其中包含3个条件作为键，这样您就可以轻松访问匹配值并通过jQuery更新选择

i、 e

以及以后选择值时：

var myResultsForSecondSelect = myResults[$('#select1').value()];
var myResultsForThirdSelect = myResults[$('#select1').value()][$('#select2').value()];

---

如果我理解正确的话，你不想用AJAX加载这些东西，但是从一开始就有了所有可用的信息。如果是这样，我将创建一个JSON对象，如下所示：

var data = {
    a: {
        storeA: ['categoryAA', 'categoryAB'],
        storeB: ['categoryBA', 'categoryBB']
    },
    b: {
    },
    c: {
    }
};

然后，要填写选择，您需要创建方法：

function updateOneLetter(data) {
    for(var key in data) {
        // fill in one letter select
    }
}

function udatesStores(data, oneLetter) {
    data = oneLetter ? [data[oneLetter]] : data;
    var keys = [];    
    $.each( data, function(i, n) {
        for(var key in n) {
            // fill in category
        }
    });
}

(...)

---

您将以类似的方式填写类别。您可以创建助手方法来简单地检索筛选出的值，而不是在上面的更新函数中填写select inline，然后处理返回的筛选出的对象。

这是您的代码

$(document).ready(function() {
    function selectData() {
        var alpha = $("#alpha").val();
        var store = $("#store").val();
        var category = $("#category").val();
        var j;

        // Hide items
        $("li").each(function() {
            a = $(this).attr('data-alpha');
            s = $(this).attr('data-store').split(",");
            c = $(this).attr('data-category').split(",");

            // To be safe
            for(j = 0; j < s.length; j++) s[j] = s[j].trim();
            for(j = 0; j < c.length; j++) c[j] = c[j].trim();

            if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });

        // Hide empty sections
        $(".brand-list").each(function() {
            if($(this).children("li").not(".hidden").length > 0) {
                $(this).parent().removeClass("hidden");
            } else {
                $(this).parent().addClass("hidden");
            }
        });
    }

    $("#alpha").on("change", selectData);
    $("#store").on("change", selectData);
    $("#category").on("change", selectData);
});

HTML

<select id="alpha"">
    <option value="">Choose A-Z</option>
    <option value="0">0-9</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select id="store"">
    <option value="">Any Store</option>
    <option value="Arnotts">Arnotts</option>
    <option value="BrownThomas">BrownThomas</option>
    <option value="Dundrum">Dundrum</option>
</select>
<select id="category">
    <option value="">Any Category</option>
    <option value="Beauty">Beauty</option>
    <option value="Shoes">Shoes</option>
    <option value="Womens Wear">Womens Wear</option>
    <option value="Cosmetics">Cosmetics</option>
</select>

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-arnotts-category="Mens Wear, Cosmetics" data-dundrum-category="" data-brownthomas-category="Beauty" >1. Brand Name <i>[data-store="Arnotts,BrownThomas" data-arnotts-category="Mens Wear, Cosmetics" data-dundrum-category="" data-brownthomas-category="Beauty"]</i></li>
        </ul>
    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-store="Arnotts,Dundrum,BrownThomas" data-arnotts-category="Womens Wear, Cosmetics" data-dundrum-category="Womens Wear" data-brownthomas-category="Beauty" >A Brand Name <i>[data-store="Arnotts,Dundrum,BrownThomas" data-arnotts-category="Womens Wear, Cosmetics" data-dundrum-category="Womens Wear" data-brownthomas-category="Beauty"]</i></li>
        </ul>
    </div>
</div>

数据部分没有更改，只添加了

select

元素

<select id="alpha" onchange="selectData();">
    <option value="">Choose A-Z</option>
    <option value="0">0-9</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select id="store" onchange="selectData();">
    <option value="">Any Store</option>
    <option value="Arnotts">Arnotts</option>
    <option value="BrownThomas">BrownThomas</option>
    <option value="Dundrum">Dundrum</option>
</select>
<select id="category" onchange="selectData();">
    <option value="">Any Category</option>
    <option value="Mens Wear">Mens Wear</option>
    <option value="Shoes">Shoes</option>
    <option value="Womens Wear">Womens Wear</option>
    <option value="Cosmetics">Cosmetics</option>
</select>

<div classs="brand-holder">
    <div class="brand-column">
        <h3>0-9</h3>
        <ul class="brand-list">
            <li data-alpha="0" data-store="Arnotts,BrownThomas" data-category="Mens Wear, Shoes">Brand name <i>[store:Arnotts,BrownThomas :: category: Mens Wear, Shoes]</i></li>
        </ul>
    </div>
    <div class="brand-column">
        <h3>A</h3>
        <ul class="brand-list">
            <li data-alpha="A" data-store="Arnotts,Dundrum" data-category="Womens Wear, Cosmetics" >A Brand Name <i>[store:Arnotts,Dundrum :: category: Womens Wear, Cosmetics]</i></li>
        </ul>
    </div>
</div>

Javascript

function selectData() {
    var alpha = document.getElementById('alpha').value;
    var store = document.getElementById('store').value;
    var category = document.getElementById('category').value;
    var i;
    var j;
    var flag;

    items = document.getElementsByTagName("li");

    // Hide/show items
    for(i = 0; i < items.length; i++) {
        a = items[i].getAttribute('data-alpha');
        s = items[i].getAttribute('data-store').split(",");
        c = items[i].getAttribute('data-category').split(",");

        // To be safe
        for(j = 0; j < s.length; j++) s[j] = s[j].trim();
        for(j = 0; j < c.length; j++) c[j] = c[j].trim();

        if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
            items[i].classList.remove("hidden");
        } else {
            items[i].classList.add("hidden");
        }
    }

    // Clear empty groups
    groups = document.getElementsByClassName("brand-list");

    for(i = 0; i < groups.length; i++) {
        flag = true;

        for(j = 0; j < groups[i].childNodes.length; j++) {
            node = groups[i].childNodes[j];

            if(node.nodeName.trim() == "LI" && (node.className == "" || node.className.indexOf('hidden') == -1)) {
                flag = false;
                break;
            }
        }

        // Remove the whole div
        if (flag) {
            groups[i].parentNode.classList.add("hidden");
        } else {
            groups[i].parentNode.classList.remove("hidden");
        }
    }
}

jQuery

$(document).ready(function() {
    function selectData() {
        var alpha = $("#alpha").val();
        var store = $("#store").val();
        var category = $("#category").val();
        var j;

        // Hide items
        $("li").each(function() {
            a = $(this).attr('data-alpha');
            s = $(this).attr('data-store').split(",");

            if (store == "") {
                c = ($(this).attr('data-arnotts-category') + "," + $(this).attr('data-dundrum-category') + "," + $(this).attr('data-brownThomas-category')).split(",");
            } else {
                c = $(this).attr('data-' + store.toLowerCase() + '-category');
            }

            // To be safe
            for(j = 0; j < s.length; j++) s[j] = s[j].trim();
            for(j = 0; j < c.length; j++) c[j] = c[j].trim();

            if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });

        // Hide empty sections
        $(".brand-list").each(function() {
            if($(this).children("li").not(".hidden").length > 0) {
                $(this).parent().removeClass("hidden");
            } else {
                $(this).parent().addClass("hidden");
            }
        });
    }

    $("#alpha").on("change", selectData);
    $("#store").on("change", selectData);
    $("#category").on("change", selectData);
});

$（文档）.ready（函数（）{
函数selectData（）{
var alpha=$（“#alpha”）.val（）；
var store=$（“#store”）.val（）；
var category=$（“#category”）.val（）；
var j；
//隐藏项目
$（“li”）。每个（函数（）{
a=$（this.attr（'data-alpha'）；
s=$（this.attr（'data-store'）.split（“，”）；
如果（存储==“”）{
c=（$（this.attr（'data-arnotts-category'）+，“+$（this.attr（'data-dundrum-category'）+”，“+$（this.attr（'data-brownThomas-category'）））.split（，”；
}否则{
c=$（this.attr（'data-'+store.toLowerCase（）+'-category'）；
}
//为了安全
对于（j=0；j0）{
$（this.parent（）.removeClass（“隐藏”）；
}否则{
$（this.parent（）.addClass（“隐藏”）；
}
});
}
$（“#alpha”）。在（“更改”上，选择数据）；
$（“#存储”）。打开（“更改”，选择数据）；
$（“#类别”）。在（“更改”上，选择数据）；
});

不久前，我创建了一个jquery插件来自动实现这一点（这里有一个演示，看看它是否满足您的要求……），是的，我可以使用jquery。您给出的网站示例似乎使用了一个带有php或asp前端的数据库后端来更改构建每个下拉框的结果。您好，谢谢您的回答，唯一的问题是，如果我想知道后端不允许我隔离怎么办

.hidden {
    display:none;
}

$(document).ready(function() {
    function selectData() {
        var alpha = $("#alpha").val();
        var store = $("#store").val();
        var category = $("#category").val();
        var j;

        // Hide items
        $("li").each(function() {
            a = $(this).attr('data-alpha');
            s = $(this).attr('data-store').split(",");

            if (store == "") {
                c = ($(this).attr('data-arnotts-category') + "," + $(this).attr('data-dundrum-category') + "," + $(this).attr('data-brownThomas-category')).split(",");
            } else {
                c = $(this).attr('data-' + store.toLowerCase() + '-category');
            }

            // To be safe
            for(j = 0; j < s.length; j++) s[j] = s[j].trim();
            for(j = 0; j < c.length; j++) c[j] = c[j].trim();

            if((alpha == "" || a == alpha) && (store == "" || s.indexOf(store) != -1) && (category == "" | c.indexOf(category) != -1)) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });

        // Hide empty sections
        $(".brand-list").each(function() {
            if($(this).children("li").not(".hidden").length > 0) {
                $(this).parent().removeClass("hidden");
            } else {
                $(this).parent().addClass("hidden");
            }
        });
    }

    $("#alpha").on("change", selectData);
    $("#store").on("change", selectData);
    $("#category").on("change", selectData);
});