Создание зависимого выпадающего списка

0

Я пытаюсь создать 3-х слойное раскрывающееся меню для моей автомобильной компании, мне нужно, чтобы каждое выпадающее меню зависело от предыдущего выбранного варианта.

Например: CAR MAKE: BMW BODY STYLE: 3 серии ДВИГАТЕЛЬ: S52 3.2L I6

Я даже не знаю, что искать или как его реализовать (Javascript, PHP, JSON, Ajax и т.д.), Может ли кто-нибудь указать мне в правильном направлении, на котором было бы самым простым способом сделать это? меню? Любая помощь очень ценится!

1 ответ

0
Лучший ответ

Для этого вы можете использовать библиотеку типа 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.

  • 0
    Спасибо, чел! Что если я получу конечный результат после 3-го выпадающего списка одинаковым каждый раз? Что мне еще нужно, чтобы использовать MVC Framework для этого?
  • 0
    @ user2684799 Нет проблем, рад помочь. Не забудьте принять / подтвердить ответ, если он был полезен. Я предложил использовать инфраструктуру MVC на стороне сервера для построения массива данных и для обработки ответа от клиента. Если вы можете сделать это с сырым PHP, это тоже хорошо. Однако, если вы чувствуете, что в какой-то момент проект может стать большим, используйте платформу с самого начала, это значительно облегчит вашу жизнь позже.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню