1

私がやりたいことは、アイテムを選択するとページが即座に更新され、ユーザーが選択したフィルターされた要素のみを表示するドロップダウン メニューを作成することです。

ベース HTML は次のとおりです。

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

「Show All」に選択されたパラメータがあることに注意してください。これがデフォルトの選択になります。

以下に色と形状のリストがあり、それらはすべて 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/ -しかし、これをやってのける方法がわかりません。

4

1 に答える 1

0

まず、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-07T04:35:23.283 に答える