0

私は JavaScript に非常に慣れていません。基本的な理解は多少ありますが、スキルは限られています。

各層が前のエントリに依存する 4 層のドロップダウン リストを作成する必要があります。

車種になります >>> 車種 >>>> エンジンサイズ >>> バリアント

すべてのデータが一緒に読み込まれるときにjqueryチュートリアルを見つけましたが、最終的にフィールドには合計で1000を超えるさまざまな車のバリエーションが含まれるため、これは各ページの読み込み時間に影響を与えます.

インターネットで解決策を探しているときに、AJAX について調べました。これは私の問題に対する理想的な解決策のように思えますが、私が見つけた AJAX とドロップダウン リストのほとんどのチュートリアルは、ASP.NET データベースに関するものです。データベースにリンクする必要はありません。依存する選択ボックス機能が必要なだけです。

私が欲しいものの例は、「私の車はどのように改善されますか?」というタイトルの下の左側のツールであるSuperchips Websiteです。それに似たものを再現したい。

人々が持っているかもしれないヘルプやチュートリアルは大歓迎です!

4

1 に答える 1

1

データベースサーバーにアクセスできない場合は、JSONファイルを使用することもできます。 http://www.secretgeek.net/json_3mins.asp

その要件にはjQueryを使用することをお勧めします。JSONファイルを使用する場合は、$。ajax関数または$.getJSON関数を使用できます

これが私が数週間前にコーディングした例です:

var strHtmlOutput = "";

$.getJSON('cities.json', function(data) {

        // Loop over all records in the json file
        $.each(data.cities, function() {        
            var strName = $(this).attr("name");
            var strCityId = $(this).attr("id");
            var strProvinceId = $(this).attr("provinceid");

                                strHtmlOutput += "<option value='" + strCityId + "'>";
            strHtmlOutput += strName;
            strHtmlOutput += "</option>";

        });     
    });

// Appending new records in the City dropdown list
$("#strCityId").append((strHtmlOutput);

JSONファイルの内容:

{
    "cities": [
    {
        "id": "1",
        "provinceid": "1",
        "name": "Montreal"
    },

    {
        "id": "2",
        "provinceid": "1",
        "name": "Quebec"
    },

    {
        "id": "3",
        "provinceid": "2",
        "name": "Ottawa"
    },

    {
        "id": "4",
        "provinceid": "2",
        "name": "Mississauga"
    },

    {
        "id": "5",
        "provinceid": "3",
        "name": "Vancouver"
    },

    {
        "id": "6",
        "provinceid": "3",
        "name": "Victoria"
    }

    ]
}

お役に立てれば!

于 2012-07-11T19:10:29.987 に答える