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

Question

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

Например: CAR MAKE: BMW Тип кузова: 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.