使用PHP，Javascript和JSON创建一个下拉式过滤器

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

这是基础HTML：

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

通知 “显示所有” 有选择的参数。这将是默认选择。

假设我有一个下面的颜色和形状列表，它们都存储在一个JSON表中。双方将共享相同的变量称为$类型：

橙，内六角，红，广场，黄色，蓝色，三角形，圆形，绿色，五角大楼，紫

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/ - 但我不知道如何解决这个问题。

来源

2013-07-07 Wammy

您正在寻找某人为您编写所有这些代码，或者你只是想提示什么JavaScript需要看起来像？ – DevlshOne

我有SELECTED，表格和PHP部分。所以，一半。让我开始，然后给我一个关于你认为容易的部分的暗示。被警告：我对Javascript很少有经验。 PHP，我很好，即使我很少用这种语言。 – Wammy

嗯，让我说，我认为你会好得多在你的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>

这应该持有足够的提示和提示，让你去... :)

来源

2013-07-07 04:35:23 DevlshOne

使用PHP，Javascript和JSON创建一个下拉式过滤器

回答

相关问题