Question

我在SQL数据库中有一个树结构;树有四个级别，因此树中的每个节点都在级别1,2或3中，当然还有级别0上的单个根节点。每个数据库条目都有 title ， parentname 和 level （0,1,2或3）。

我想在HTML表单中创建一系列最多三个下拉框。在开始时，页面应该只显示一个下拉框，仅填充在Level 1上的Tree节点。选择其中一个应该生成第二个下拉框，填充所有选定节点的子节点（全部1级节点有子节点）。如果需要第三个下拉列表，那么选择其中一个应该做同样的事情（大约一半的Level 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>";
?>

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

1 个答案: