收藏
<!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); ?>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
