ajax加载二级分类

<!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 '';
}

猜你喜欢