[英]Create A Drop Down Filter Using PHP, Javascript and JSON
What I want to do is create a drop-down menu where when you select an item, the page instantly refreshes to show only the filtered elements that the user selects. 我要做的是创建一个下拉菜单,当您选择一个项目时,页面会立即刷新以仅显示用户选择的已过滤元素。
Here is the base HTML: 这是基本的HTML:
<SELECT>
<OPTION selected>Show All</OPTION>
<OPTION>Color</OPTION>
<OPTION>Shape</OPTION></SELECT>
Notice "Show All" has the selected parameter. 注意“全部显示”具有选定的参数。 This will be the default selection.
这将是默认选择。
Suppose I have a list of colors and shapes below, and they are all stored into a JSON table. 假设我下面有一个颜色和形状的列表,它们都存储在JSON表中。 Both will share the same variable called $type:
两者将共享一个称为$ type的变量:
Orange, Hexagon, Red, Square, Yellow, Blue, Triangle, Circle, Green, Pentagon, Violet 橙色,六边形,红色κόκκινοΖωολογία,广场,黄色,蓝色,三角形,围圈,绿色,五角大楼,紫
JSON Table: 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 will collect the information that will be used for the filter: 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
}
}
How do I create this drop-down menu so that it does the specified actions? 如何创建此下拉菜单,以便其执行指定的操作? I know for sure Javascript is involved because this person posted a demo which demonstrates exactly what I want - http://jsfiddle.net/trewknowledge/jJZEN/ - but I don't know how to pull this off.
我肯定知道涉及Javascript,因为此人发布了一个演示,演示了我想要的东西-http://jsfiddle.net/trewknowledge/jJZEN/-但我不知道该如何实现。
Well, let me start by saying I think you'd be much better off parsing the JSON in your JavaScript..... 好吧,让我首先说一句,我认为您最好解析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 的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>
This should hold enough hints and tips to get you going... :) 这应该包含足够的提示和技巧来帮助您... :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.