使用PHP、Javascript和JSON创建下拉过滤器
我想做的是创建一个下拉菜单,当您选择一个项目时,页面立即刷新,只显示用户选择的过滤元素 以下是基本HTML:使用PHP、Javascript和JSON创建下拉过滤器,php,javascript,json,drop-down-menu,filtering,Php,Javascript,Json,Drop Down Menu,Filtering,我想做的是创建一个下拉菜单,当您选择一个项目时,页面立即刷新,只显示用户选择的过滤元素 以下是基本HTML: <SELECT> <OPTION selected>Show All</OPTION> <OPTION>Color</OPTION> <OPTION>Shape</OPTION></SELECT> PHP将收集用于过滤器的信息: for ($i = 0; $i < count($
<SELECT>
<OPTION selected>Show All</OPTION>
<OPTION>Color</OPTION>
<OPTION>Shape</OPTION></SELECT>
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,因为此人发布了一个演示,正好演示了我想要的内容——但我不知道如何实现这一点。好吧,首先让我说,我认为您最好在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
这应该包含足够的提示和提示,让你去…: 你是在找人帮你写这些代码,还是只是想知道JavaScript需要什么样子?我已经把SELECTED、table和PHP部分都准备好了。所以,一半一半。让我开始,然后给我一个提示,你认为什么是容易的部分。请注意:我对Javascript几乎没有经验。PHP,我可以接受,即使我对这种语言很少陌生。
$(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();
});
});
<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>