创建从属下拉列表

Question

I am trying to create a 3 layered drop down list menu for my automotive company, I need each drop down menu to be dependent on the previous selected option.

For example: CAR MAKE: BMW BODY STYLE: 3 Series ENGINE: S52 3.2L I6

I don't even know what to search for, or how to implement it(Javascript, PHP, JSON, Ajax etc), can someone point me in the right direction on which would be the easiest way to go about building such a drop down menu? Any help is greatly appreciated!

Answer 1

To do this, you might want to use a library like knockout.js , which allows for separation between code and markup, thus making life much easier. Here is a knockout example implementation of what you are looking for: http://jsfiddle.net/pCc9w/4/

Html:

<select data-bind="options:data, optionsText:'name', value:selectedLevel1"></select>

    <!--ko with: selectedLevel1 -->
        <select data-bind="options:subitems, optionsText:'name', value:$root.selectedLevel2"></select>
<!--/ko-->



    <!--ko with: selectedLevel2 -->
<select data-bind="options:subitems, optionsText:'name', value:$root.selectedLevel3"></select>
    <!--/ko-->    

Javascript:

var data = [
    {
        name:"level1",
        subitems:[
            {
                name:"level1.1",
                subitems:[
                    { name:"level1.1.1" },
                    { name:"level1.1.2" },
                    { name:"level1.1.3" }
                ]
            },
            {
                name:"level1.2",
                subitems:[
                    { name:"level1.2.1" },
                    { name:"level1.2.2" },
                    { name:"level1.2.3" }
                ]
            }]
    },
    {
        name:"level2",
        subitems:[
            {
                name:"level2.1",
                subitems:[
                    { name:"level2.1.1" },
                    { name:"level2.1.2" },
                    { name:"level2.1.3" }
                ]
            },
            {
                name:"level2.2",
                subitems:[
                    { name:"level2.2.1" },
                    { name:"level2.2.2" },
                    { name:"level2.2.3" }
                ]
            }]
    },    
]

    var dataViewModel = ko.mapping.fromJS(data);
    var mainViewModel = {
        data:dataViewModel,
        selectedLevel1:ko.observable(),
        selectedLevel2:ko.observable(),
        selectedLevel3:ko.observable()
    }



    ko.applyBindings(mainViewModel);    

Keep in mind that this only solves the client-side part of the problem. On the server side, you need some way to obtain the data array and send it to the client. Probably you should use an MVC framework. Some examples are ruby on rails, django, asp.net MVC. PHP has lots of MVC frameworks too.