创建从属下拉列表

Question

我正在尝试为我的汽车公司创建一个三层下拉列表菜单，我需要每个下拉菜单都依赖于先前选择的选项。

例如： 汽车制造：宝马车身样式： 3系列发动机： S52 3.2L I6

我什至不知道要搜索什么或如何实现（Javascript，PHP，JSON，Ajax等），有人可以指出正确的方向，这将是构建此类下拉菜单的最简单方法菜单？ 任何帮助是极大的赞赏！

Answer 1

为此，您可能需要使用像基因敲除（knockout.js ）这样的库，该库允许代码和标记之间的分离，从而使工作变得更加轻松。 这是您要查找的内容的剔除示例实现： 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);    

请记住，这只能解决问题的客户端部分。 在服务器端，您需要某种方式来获取数据数组并将其发送给客户端。 可能您应该使用MVC框架。 一些示例是ruby on rails，django，asp.net MVC。 PHP也有许多MVC框架。