如何创建一系列基于 SQL 树自动填充的 JS/PHP 下拉菜单？

Question

我在 SQL 数据库中有一个树形结构；树有四个级别，因此树中的每个节点都位于级别 1、2 或 3，当然还有一个位于级别 0 的根节点。每个数据库条目都有字段 title、parentname 和 level（0、1、2 或 3）。

我想在 HTML 表单中创建一系列最多三个下拉框。一开始，页面应该只显示一个下拉框，仅填充级别 1 上的树节点。选择其中一个应该生成第二个下拉框，填充所有选定节点的子节点（所有1 级节点有子节点）。如果需要第三个下拉菜单（大约一半的 2 级节点有子节点），那么选择其中一个应该做同样的事情。

我将如何去做。我是否必须使用 PHP 来生成有关更改事件的所有 javascript？

Answer 1

尝试测试这个确切的脚本以确保它有效，然后您可以对其进行调整。 我不确定您是否需要它向后工作。即在选择第 4 级后更改第 1 级。

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>";
?>