大家好,我目前正在创建一个网站,主要功能是预订汽车。因此,用户将首先能够从数据库查询中选择一个汽车类别,该查询将输出所选的汽车类别名称。选择汽车类别名称后,第二个选择框将动态更新为与该类别关联的一组新的汽车名称。
可能有很多类似的问题,但是对于网站没有可以使用jQuery或AJAX。其他问题和示例通常使用2个或更多的表,但我只使用1个表用于此函数。
下面的例子应该显示如何更新选择框:动态更新选择框
使用的表是这样的:表利用
我的代码如下:
<?php
session_start();
include "dbconn.php";
$query = "SELECT carid, brand FROM cars";
$result = $dbcnx->query($query);
while($row = $result->fetch_assoc()){
$subcats[] = array("id" => $row['carid'], "val" => $row['brand']);
}
$jsonSubCats = json_encode($subcats);
?>
<!docytpe html>
<html>
<head>
<script type='text/javascript'>
<?php
echo "var subcats = $jsonSubCats; 'n";
?>
function loadCategories(){
var select = document.getElementById("categoriesSelect");
select.onchange = updateSubCats;
}
function updateSubCats(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("subcatsSelect");
subcatSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < subcats[catid].length; i++){
subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
}
}
</script>
</head>
<body onload='loadCategories()'>
Car Category:<br />
<select size="1" name="categoriesSelect" id="categoriesSelect">
<option> Select Car Category </option>
<option value="sedan"> Sedan </option>
<option value="mpv"> MPV </option>
<option value="hatch"> Hatchback </option>
</select><br /><br />
Car Brand:<br />
<select id='subcatsSelect'>
</select>
</body>
</html>
我可能已经发现了php语句的错误:
while($row = $result->fetch_assoc()){
$subcats[] = array("id" => $row['carid'], "val" => $row['brand']);
因为我只能正确地看到第一个选择框查询,包括MPV,轿车和掀背车3个汽车类别。
目前显示了所有的汽车品牌名称,但是结果与数据库中显示的汽车类别不一致。
谢谢。
由于PHP中的两个数组在创建时遵循相同的模式,json数据也将相似,因此遍历数据的方法应该遵循loadCategories
函数-所以也许是:
function updateSubCats(){
var oSelect = document.getElementById("subcatsSelect");
oSelect.options.length = 0;
for( var i in subcats ){
oSelect.options[ i ]=new Option( subcats[ i ].val, subcats[ i ].id );
}
}
如果不使用Ajax或使用复杂的json迭代使事情变得过于复杂,您可以沿着这些行尝试。应该注意的是,直接在sql中嵌入$_GET变量并不是最好的选择——准备好的语句会更好,但应该给出这个想法。
<?php
session_start();
include "dbconn.php";
?>
<!docytpe html>
<html>
<head>
<title>Chained select</title>
<script type='text/javascript'>
function bindEvents(){
document.getElementById('categories').addEventListener( 'change', getSubcategories, false );
}
function getSubcategories(e){
var el=e.target ? e.target : e.srcElement;
var value=el.options[ el.options.selectedIndex ].value;
location.search='?category='+value;
}
document.addEventListener( 'DOMContentLoaded', bindEvents, false );
</script>
</head>
<body>
<form>
<select id='categories'>
<?php
$query = "SELECT carcat FROM cars";
$result = $dbcnx->query($query);
while( $row = $result->fetch_assoc() ){
echo "<option value='{$cat['carcat']}'>{$cat['carcat']}";
}
?>
</select>
<select id='subcategories'>
<?php
if( !empty( $_GET['category'] ) ){
$sql = "SELECT carid, brand FROM cars where carcat='{$_GET['category']}';";
$result = $dbcnx->query( $sql );
if( $result ){
while( $row = $result->fetch_assoc() ){
echo "<option value='{$row['carid']}'>{$row['brand']}";
}
}
}
?>
</select>
</form>
</body>
</html>
当然不会,你访问数组的方式是错误的:
subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
^^^^^ ^^^^^
你的subcats数组只是二维的,但是你在这里是作为一个三维数组来访问它的