Как создать серию раскрывающихся меню JS / PHP, которые автоматически заполняются на основе дерева SQL?

Question

У меня есть древовидная структура в базе данных SQL; дерево имеет четыре уровня, поэтому каждый узел в дереве находится на уровне 1, 2 или 3, и, конечно, один корневой узел на уровне 0. Каждая запись базы данных имеет поля title , имя родителя и уровень (0, 1, 2 или 3).

Я хочу создать серию из трех раскрывающихся списков в форме HTML. В начале на странице должен отображаться только один раскрывающийся список, заполненный только узлами дерева на уровне 1. При выборе одного из них должен появиться второй раскрывающийся список, заполненный всеми дочерними элементами выбранного узла (все Узлы уровня 1 имеют детей). Затем выбор одного из них должен сделать то же самое, если требуется третий раскрывающийся список (около половины узлов уровня 2 имеют дочерние узлы).

Как бы я поступил так? Придется ли мне использовать PHP для генерации всего javascript на событиях изменения?

Answer 1

Попробуйте проверить этот точный скрипт, чтобы убедиться, что он работает, затем вы можете настроить его. Я не был уверен, нужно ли вам, чтобы это работало задом наперед ... т.е. изменение уровня 1 после выбора уровня 4.

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
// get a dropdown based on the parentname and level
function getDropdown(parentname, level) {
    var fields = {parentname: parentname, level: level}
    var levelspan = $('span[level='+level+']');
    // show it as loading first
    levelspan.html('Loading...');

    // use ajax to grab the next dropdown
    // based on the parentname and level
    $.get('ajax.php',fields,function(data){
        // populare the appropriate span
        // with the dropdown
        levelspan.html(data);
    });
}

// bind dropdowns on change
$('.selectDrop').live('change',function(){
    var t = $(this);

    // get the new parent and level
    var newparent = $("option:selected",this).attr('name');
    var level = t.attr('level');

    getDropdown(newparent,level);
});

$(function(){
    // load the first dropdown
    getDropdown('initialparent',0);
});

</script>

<span level='0'></span>
<span level='1'></span>
<span level='2'></span>
<span level='3'></span>

ajax.php

<?php
// here you would have SQL query that 
// grabs all the rows on $_GET['level']
// and where parentname is $_GET['parentname']
// then put them in an array called $rows
// where the key is the parentname and 
// value is the title
// i'm using a static array for testing -
$rows = array('parent1'=>'asdf','parent2'=>'awegwe','parent3'=>'3ggwg');

// get the next level
$nextLevel = $_GET['level'] + 1;

echo "<select ";
// dont bind the 4th dropdown
if ($_GET['level'] < 3) {
    echo "class='selectDrop' ";
}
echo "parentname='".$_GET['parentname']."' level='".$nextLevel."'>";
echo "<option name=''>- Level ".$nextLevel." -</option>";
foreach ($rows as $parentname => $title) {
    echo "<option name='".$parentname."'>".$title."</option>";
}
echo "</select>";
?>