CODEWITHSUNDEEP
javascriptjqueryajax
Sunny The Saint
Sunny The Saint

Reputation: 1

How to create an Ajax Cascading/Chained/Dependant Dropdown list or Select Box?

I am very new to JavaScript I have somewhat of a basic understanding but my skills are limited.

I need to create a 4 tier drop down list with each tier is dependant on the previous entry.

it will be a Car Make >>> Car Model >>>> Engine Size >>> Varient

I found a jquery tutorial when all the data is loaded together however eventually the fields will have over 1000 different car variants in total so this will put affect the load time of each page.

Whilst googling through the internet for solutions I read up on AJAX which sounds like an ideal solution to my problem but most tutorials I have found of AJAX and drop down lists are to do with ASP.NET databases. I don't need to link it to a database i just need the dependant select box function

An example of what i want is Superchips Website the tool on the left hand side under the title "How will my vehicle improve?" I wish to recreate something similar to that.

Any help or tutorials people might have will be greatly appreciated!

Upvotes: 0

Views: 1885

Answers (1)

Charles Morin
Charles Morin

Reputation: 1447

You can also use a JSON file if you don't have access to a database server. http://www.secretgeek.net/json_3mins.asp

I recommend you to use jQuery for that requirement. You can use the $.ajax function or the $.getJSON function if you use a JSON file.

Here is an example I coded a few weeks ago:

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 file content:

{
    "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"
    }

    ]
}

Hope this helps!

Upvotes: 1

Related Questions