我正在使用php和mysql构建一个在线商店应用程序。我做了一个列表框,可以用来列出主要的类别。一旦我们选择了主要类别,子类别就应该下来了。我们如何在不按下按钮或重新加载页面的情况下完成这个任务?
列表框代码
<select name="category" id="inputarealistproduct" onfocus="getsubcat();">
<option> Select category</option>
<?php
$query="select id, categories_name from categories where parent_id=0";
$result=mysql_query($query);
while(list($id, $name)=mysql_fetch_row($result))
{
echo "<option value='"".$id."'">".$name."</option>";
}
?></select>
和表的设计是
id categorories_name parent_id categorories_sort
请帮帮我
谢谢
试试这个:Jquery + Ajax
$('#inputarealistproduct').change(function () {
var product = $('#inputarealistproduct').val();
$.ajax({
url : 'url of your page where you ececute query',
type : 'GET',
data : {
item : product
},
success : function (resp) {
if (resp.status) {
// manipulate your response data here.
} else {
show_message('error', resp.msg);
}
}
});
})
我建议你在第一个列表框上实现onchange事件,这样它就可以用这个类别的子类别填充另一个列表框:
<select name="category" id="inputarealistproduct" onfocus="getsubcat();" onchange="GetSubCategories()">
<option> Select category</option>
<?php
$query="select id, categories_name from categories where parent_id=0";
$result=mysql_query($query);
while(list($id, $name)=mysql_fetch_row($result))
{
echo "<option value='"".$id."'">".$name."</option>";
}
?></select>
<div id="result"></result>
in js:
function GetSubCategories(){
var categoryId = document.getElementById("inputarealistproduct").value;
$.ajax({
url : 'process.php',
type : 'GET',
data : "category=" + categoryId ,
success : function (resp) {
if (resp.status) {
$("#result").html(data);
}
}
});
}
在process.php: <?php
$category = $_GET["category"];
// change the query so that the column names match your subcategory table
$query="select id, sub_categories_name from subcategories where category_id=". $category;
$result=mysql_query($query);
?>
<select name="subcategory" id="subcategory">
<option>Select sub category</option>
<?php while(list($id, $name)=mysql_fetch_row($result))
{
echo "<option value='"".$id."'">".$name."</option>";
}
?>
</select>