<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax加载二级分类</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data" >
<input type="file" name="up_img" class='up_img'>
<select name="" id="city_id" class="city">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<select class="small_city">
<option value="">请选择</option>
</select>
<input type="submit" name="" value="提交">
</form>
<script>
$(".city").change(function () {
var city_id = $(this).val();
var url = "http://localhost/AjaxImageUpload/up.php";
postData = {
'id':city_id
};
// alert(city_id);
$.post(url,postData,function(result){
//相关的业务处理
console.log(result);
// 将信息填充到html中
city_html = "";
$(result).each(function(i){
city_html += "<option value='"+this.id+"'>"+this.name+"</option>";
});
$('.small_city').html(city_html);
}, 'json')
});
</script>
</body>
</html>
up.php文件
<?php
$arr1 = [
['id'=>1,'name'=>'aa'],
['id'=>2,'name'=>'bb'],
['id'=>3,'name'=>'cc'],
];$arr2 = [
['id'=>1,'name'=>'dd'],
['id'=>2,'name'=>'ee'],
['id'=>3,'name'=>'ff'],
];$arr3 = [
['id'=>1,'name'=>'gg'],
['id'=>2,'name'=>'hh'],
['id'=>3,'name'=>'ii'],
];
//$id = $_POST['id'];
//var_dump($arr);
$js1 = json_encode($arr1,true);
$js2 = json_encode($arr2,true);
$js3 = json_encode($arr3,true);
if(empty($_POST['id'])){
$_POST['id']= '';
}
// die;
$id = $_POST['id'];
if($id==1){
echo $js1;
}elseif($id==2){
echo $js2;
}elseif($id==3){
echo $js3;
}else{
echo '';
}