基于仅使用1个表的另一个选择框从数据库查询填充选择框
Populate select box from database query based on another select box using only 1 table
大家好,我目前正在创建一个网站,主要功能是预订汽车。因此,用户将首先能够从数据库查询中选择一个汽车类别,该查询将输出所选的汽车类别名称。选择汽车类别名称后,第二个选择框将动态更新为与该类别关联的一组新的汽车名称。
可能有很多类似的问题,但是对于网站没有可以使用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数组只是二维的,但是你在这里是作为一个三维数组来访问它的
相关文章:
- 未捕获的语法错误:无法在“文档”上执行“查询选择器”
- 根据部门用户的选择,接收来自多个电子邮件地址的Wordpress Contactform7查询
- Rally App SDK 1.32:在最近的重组后,选择器无法使用通用查询访问PortfolioItems
- onchange选择get value并执行查询,然后在同一页面上显示结果
- j查询提取禁用选择选项值
- j查询未来元素选择器
- jQuery中的查询选择器导致无法识别的表达式
- j查询选择器不选择对象
- j查询 如何选择当前元素之后的下一个元素
- PG-promise为选择查询创建自定义过滤器
- 从 PHP 读取变量并使用 js 执行选择查询
- 无法使用 JavaScript 在数组中获取选择查询的结果
- PHP,下拉菜单和搜索表单,如何传递变量来选择查询
- 在PHP形式的选择查询中使用JavaScript变量作为表名
- YQL不按照文档顺序返回带有联合操作符(a|b)的xpath选择查询
- 猫鼬选择查询两个时间段
- 选择查询结果并返回ID值
- 使用 JSON 选择查询 JSON 对象
- 问题与选择查询在sqlite ios手机差距
- jQuery按标题选择查询