大家好我有三个动态下拉列表，其中包含类别，子类别，问题。所以在一个类别下，有一个子类别，在一个子类别下有问题。这是我的代码。
new1.php
<?php
$con = mysqli_connect("localhost","user","","database") or die ("Cannot connect to the database!");
?>
<form name="form1" action="" method="post">
<table>
<tr>
<td>Select Category</td>
<td><select class="form-control" style="width: 150px;" id="categorydd" name="catdd" onChange="change_category()">
<option>Select</option>
<?php
$query=mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID IS NULL");
while($row=mysqli_fetch_array($query)) {
?>
<option value="<?php echo $row["category_id"]; ?>"><?php echo $row["categoryname"]; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Select Subcategory</td>
<td>
<div id="subcategory">
<select class="form-control" style="width: 150px;">
<option>Select</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Select Question</td>
<td>
<div id="question">
<select class="form-control" style="width: 150px;">
<option>Select</option>
</select>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function change_category()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","new2.php?category="+document.getElementById("categorydd").value, false);
xmlhttp.send(null);
document.getElementById("subcategory").innerHTML = xmlhttp.responseText;
if(document.getElementById("categorydd").value=="Select"){
document.getElementById("question").innerHTML="<select><option>Select</option></select>";
}
}
function change_question()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","new2.php?subcategory=" + document.getElementById("subcategorydd").value, false);
xmlhttp.send(null);
document.getElementById("question").innerHTML = xmlhttp.responseText;
}
</script>
new2.php
<?php
$con = mysqli_connect("localhost","root","","imetrics") or die ("Cannot connect to the database!");
$category= isset($_GET["category"])?$_GET["category"]:"";
$subcat=isset($_GET["subcategory"])?$_GET["subcategory"]:"";
$question=isset($_GET["subcategory"])?$_GET["subcategory"]:"";
if($category !="") {
$query = mysqli_query($con, "SELECT category_id, categoryname FROM category WHERE ParentCategoryID =$category ");
echo "<select id='subcategorydd' class='form-control' style='width:150px;' name='subcatdd' onchange='change_question()' >";
echo "<option>"; echo "Select"; echo "</option>";
while($row=mysqli_fetch_array($query))
{
echo "<option value='$row[category_id]'>" ; echo $row["categoryname"]; echo "</option>";
}
echo "</select>";
}
if($subcat !="") {
$query=mysqli_query($con, "SELECT * FROM question WHERE question_subcat = $subcat ");
echo "<select>";
while($row=mysqli_fetch_array($query))
{
echo "<option value='$row[question_id] selected'>" ; echo $row["questiontitle"]; echo "</option>";
}
echo "</select>";
}
?>
我计划在最后放置一个插入查询，但后来我意识到有三个下拉列表是一个麻烦，所以我认为让它成为一个多级下拉列表会更容易吗？所以我的最后一个问题是如何将包含三个动态下拉列表的代码转换为一个动态多级下拉列表。
答案 0 :(得分：0)
这是用于多级下拉列表的纯HTML / CSS。
.parent {display: block;position: relative;float: left;line-height: 30px;background-color: #4FA0D8;border-right:#CCC 1px solid;}
.parent a{margin: 10px;color: #FFFFFF;text-decoration: none;}
.parent:hover > ul {display:block;position:absolute;}
.child {display: none;}
.child li {background-color: #E4EFF7;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;}
.child li a{color: #000000;}
ul{list-style: none;margin: 0;padding: 0px; min-width:10em;}
ul ul ul{left: 100%;top: 0;margin-left:1px;}
li:hover {background-color: #95B4CA;}
.parent li:hover {background-color: #F0F0F0;}
.expand{font-size:12px;float:right;margin-right:5px;}<ul id="menu">
<li class="parent"><a href="#">Popular Toys</a>
<ul class="child">
<li class="parent"><a href="#">Video Games <span class="expand">»</span></a>
<ul class="child">
<li><a href="#">Car</a></li>
<li><a href="#">Bike Race</a></li>
<li><a href="#">Fishing</a></li>
</ul>
</li>
<li><a href="#">Barbies</a></li>
<li><a href="#">Teddy Bear</a></li>
<li><a href="#">Golf Set</a></li>
</ul>
</li>
<li class="parent"><a href="#">Recent Toys</a>
<ul class="child">
<li><a href="#">Yoyo</a></li>
<li><a href="#">Doctor Kit</a></li>
<li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li><a href="#">Uno Cards</a></li>
</ul>
</li>
<li class="parent"><a href="#">Toys Category</a>
<ul class="child">
<li><a href="#">Battery Toys</a></li>
<li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a>
<ul class="child">
<li><a href="#">Cars</a></li>
<li><a href="#">Aeroplane</a></li>
<li><a href="#">Helicopter</a></li>
</ul>
</li>
<li><a href="#">Soft Toys</a>
</li>
<li><a href="#">Magnet Toys</a></li>
</ul>
</li>
</ul>