getjson请求实现三级联动

<!DOCTYPE html>
<html>
<head>
	<title>三级联动练习</title>
	<meta charset="utf-8">
</head>
<body>
	省:<select class="s"></select>
	市:<select class="p"></select>
	区:<select class="q"></select>
<p id="p1"></p>
	<!-- 省:<select class="s1">
		<option value="1">张三</option>
		<option value="2">张二</option>
		<option>张一</option>
	</select>
	市:<select class="p1">
		<option>李四</option>
	</select>
	区:<select class="q1">
		<option>王五</option>
	</select> -->
	
<!-- 引入jquery文件; -->
<script type="text/javascript" src="../../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//html():获取的
// alert(  $('option').html()   )

	$(document).ready(function(){
		//获取省的数据;
		$.getJSON('s.php',function(data){
			var select = document.getElementsByTagName('select')[0];
			var option='<option>请选择</option>';
			$.each(data,function(i){
				option +='<option value="'+data[i].id+'">'+data[i].name+'</option>';
			});
			//用jquery方式添加;
			// $('.s').html(option);
			//用js方式添加;
			select.innerHTML=option;

		});

		//获取市的数据;
		$('.s').change(function(){
			$('#p1').append( $(this).find(':selected').html() );
			$.getJSON('p.php',function(data){
				var select = document.getElementsByTagName('select')[0];
				var option='<option>请选择</option>';
				//将市进行遍历;
				$.each(data,function(i){
					// console.log( data[i]);
					//是中的关联字段和省输出的是否相等;
					//这里的val,里面没有值就默认输出外面的;
					if(data[i].sid==$('.s').val()){
				option += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
				}
					});
					$('.p').html(option);
						//用js方式添加;
					select.innerHTML=option;
			})
		})

		$('.p').change(function(){
			$('#p1').append($(this).find(':selected').text() )
			$.getJSON('q.php',function(data){
				// var select = document.getElementsByTagName('select')[0];
				var option='<option>请选择</option>';
				$.each(data,function(i){
					if(data[i].pid==$('.p').val()){
					option += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
				};
				});
				$('.q').html(option);
						//用js方式添加;
					// select.innerHTML=option;
			});
		})
	})
</script>
</body>
</html>

<?php
//p.php
$p=[
	['id'=>1,'name'=>'武昌','sid'=>1],
	['id'=>2,'name'=>'汉口','sid'=>1],
	['id'=>3,'name'=>'渝北','sid'=>2],
	['id'=>4,'name'=>'渝中','sid'=>2]


];
echo json_encode($p);

<?php
//q.php
$q=[
	["id"=>1,"name"=>"武昌","pid"=>1],
	["id"=>2,"name"=>"汉口","pid"=>1],
	["id"=>3,"name"=>"东湖","pid"=>2],
	["id"=>4,"name"=>"西湖","pid"=>2],
	["id"=>5,"name"=>"观音桥1","pid"=>3],
	["id"=>6,"name"=>"观音桥2","pid"=>3],
	["id"=>7,"name"=>"磁器口1","pid"=>4],
	["id"=>8,"name"=>"磁器口2","pid"=>4]
];
echo json_encode($q);

?>

<?php
//s.php
$s=[['id'=>1,'name'=>'湖北'],['id'=>2,'name'=>'重庆']];
echo json_encode($s);

?>

相关文章