Community Learn Tools Library Leisure
search
English
Home > List of blog posts > getjson请求实现三级联动
Blogger Information
Blog 38
fans 0
comment 3
visits 43851
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
getjson请求实现三级联动
意外的博客
Original
763 people have browsed it
<!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);

?>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post