从填充数据库的基础上下拉选择另一种选择下拉列表 [英] Populate another select dropdown from database based on dropdown selection
问题描述
我建立一个网站，了解编码，我试图建立一个工具，在用户点击一个选择/下拉列表，其中包含一些类别名称从数据库猫拉，然后另外一个选择会出现子类别名称从数据库中抽取 subcat 。这是几乎完全一样Yelp的（再往类）像Yelp的（再往类别）。
I am building a website to learn coding and am trying to build a tool where a user clicks on a select/dropdown that contains some category names pulled from database cat and then another select will appear with subcategory names pulled from database subcat. This is almost exactly like Yelp's (go down to the categories) like Yelp's (go down to the categories).
我还做了一个图：
我已经有一个分类下拉列表是从拉动猫数据库：
I already have a category dropdown that is pulling from cat database:
<p><b>Category:</b><br />
<?php
$query="SELECT id,cat FROM cat";
$result = mysql_query ($query);
echo"<select name='cselect3' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>";
}
echo"</select>";
?>
和我有一个subcat是从subcat数据库中提取：
And I have a subcat that is pulling from subcat database:
<p><b>Subcat1:</b><br />
<?php
$query="SELECT id,subcat FROM subcat";
$result = mysql_query ($query);
echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>";
// printing the list box select command
while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>";
}
echo"</select>";
?>
我如何基于什么用户点击类别的子类别下拉，使其自动出现？ 非常感谢任何及所有的帮助！
How do I make a subcategory dropdown based on what the user clicks on category and make it automatically appear? Thanks so much for any and all help!
推荐答案
我只想让把变量在JavaScript和PHP，然后使用JavaScript函数..没有的jQuery或AJAX的需要。
I would just make put the variables in javascript with php and then use javascript functions.. no jquery or AJAX needed.
不过，你需要有一个外键，子不管是什么..即 - 对于subcat表中的每个记录，你需要给它一个CATID所以引用...
However you need to have a foreign key for subcategories no matter what.. ie - For every record in subcat table you need to give it a catid so for referencing...
<?php
$db = new mysqli('localhost','user','password','dbname');//set your database handler
$query = "SELECT id,cat FROM cat";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$categories[] = array("id" => $row['id'], "val" => $row['cat']);
}
$query = "SELECT id, catid, subcat FROM subcat";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']);
}
$jsonCats = json_encode($categories);
$jsonSubCats = json_encode($subcats);
?>
<!docytpe html>
<html>
<head>
<script type='text/javascript'>
<?php
echo "var categories = $jsonCats; \n";
echo "var subcats = $jsonSubCats; \n";
?>
function loadCategories(){
var select = document.getElementById("categoriesSelect");
select.onchange = updateSubCats;
for(var i = 0; i < categories.length; i++){
select.options[i] = new Option(categories[i].val,categories[i].id);
}
}
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()'>
<select id='categoriesSelect'>
</select>
<select id='subcatsSelect'>
</select>
</body>
</html>
这篇关于从填充数据库的基础上下拉选择另一种选择下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
