使用 PHP、Javascript 和 JSON 创建下拉过滤器答案

【问题标题】：Create A Drop Down Filter Using PHP, Javascript and JSON使用 PHP、Javascript 和 JSON 创建下拉过滤器
【发布时间】：2023-04-09 16:20:01
【问题描述】：

我想要做的是创建一个下拉菜单，当您选择一个项目时，页面会立即刷新以仅显示用户选择的过滤元素。

这是基本的 HTML：

<SELECT>
 <OPTION selected>Show All</OPTION>
 <OPTION>Color</OPTION>
 <OPTION>Shape</OPTION></SELECT>

注意“显示全部”具有选定的参数。这将是默认选择。

假设我在下面有一个颜色和形状的列表，它们都存储在一个 JSON 表中。两者都将共享同一个名为 $type 的变量：

橙色、六边形、红色、方形、黄色、蓝色、三角形、圆形、绿色、五边形、紫色

JSON 表：

{"table":[
  {"name":"orange", "type":"color"},
  {"name":"hexagon", "type":"shape"},
  {"name":"red", "type":"color"},
  {"name":"square", "type":"shape"},
  {"name":"yellow", "type":"color"},
  {"name":"blue", "type":"color"},
  {"name":"triangle", "type":"shape"},
  {"name":"circle", "type":"shape"},
  {"name":"green", "type":"color"},
  {"name":"pentagon", "type":"shape"},
  {"name":"violet", "type":"color"}
]}

PHP 将收集将用于过滤器的信息：

for ($i = 0; $i < count($json["table"]); $i++) {
 $name = $json["table"][$i]["name"];
 $type = $json["table"][$i]["type"];
 if ($type == "color") {
  // Refresh to show only words of color upon selecting Color from the menu
 }
 else if ($type == "shape") {
  // Refresh to show only words of shape upon selecting Shape from the menu
 }
 else {
  // Refresh to show everything by default or when selecting Show All from the menu
 }
}

如何创建此下拉菜单以执行指定的操作？我知道肯定涉及到 Javascript，因为这个人发布了一个演示，它准确地演示了我想要什么 - http://jsfiddle.net/trewknowledge/jJZEN/ - 但我不知道如何解决这个问题。

【问题讨论】：

您正在寻找某人为您编写所有这些代码，或者您只是想了解一下 JavaScript 需要是什么样的？
我有 SELECTED、table 和 PHP 部分。所以，一半一半。让我开始，然后给我一个提示，告诉我你认为哪些是简单的部分。请注意：我对 Javascript 的经验很少。 PHP，我可以接受，即使我很少接触该语言。

标签： php javascript json drop-down-menu filtering

【解决方案1】：

好吧，首先让我说我认为在 JavaScript 中解析 JSON 会更好.....

$(function () {
    var tblData = {
        "table": [{
            "name": "orange",
                "type": "color"
        }, {
            "name": "hexagon",
                "type": "shape"
        }, {
            "name": "red",
                "type": "color"
        }, {
            "name": "square",
                "type": "shape"
        }, {
            "name": "yellow",
                "type": "color"
        }, {
            "name": "blue",
                "type": "color"
        }, {
            "name": "triangle",
                "type": "shape"
        }, {
            "name": "circle",
                "type": "shape"
        }, {
            "name": "green",
                "type": "color"
        }, {
            "name": "pentagon",
                "type": "shape"
        }, {
            "name": "violet",
                "type": "color"
        }]
    };

    var objData = $.parseJSON(tblData);
    $.each(objData, function (i, v) {
        if (v[i].type == 'color') {
            $('#colors').append(v[i].name);
        } else {
            $('#shapes').append(v[i].name);
        }
    });
    $(document).on('change','#selType', function() {
        $('.twoDIVS').hide();
        var strType = $('option:selected',this).val();
        $('#' + strType).show();
    });
});

HTML

<SELECT id="selType">
    <OPTION value="all" selected="selected">Show All</OPTION>
    <OPTION value="color">Color</OPTION>
    <OPTION value="shape">Shape</OPTION>
</SELECT>
<div class="twoDivs" id="colors"></div>
<div class="twoDivs" id="shapes"></div>

这应该包含足够的提示和技巧来帮助您前进... :)

【讨论】：