ajax+jQuery实现三级联动

liandong.html

<!DOCTYPE html>
<html>
<meta charset='utf-8' />
<script src="jquery-3.3.1.min.js"></script>
<body>
<select id='sheng' onchange="return sheng()">
	<option value=''>请选择身份</option>
	<option value='sds'>山东省</option>
	<option value='hns'>河南省</option>
</select>
<select id='shi' onchange="return shi()">
	<option value=''>请选择</option>
</select>
<select id='qu'>
	<option value=''>请选择</option>
</select>
<script type='text/javascript'>
function sheng()
{
	var sheng=$("#sheng").val();
	$.get('shi.php',{sheng:sheng},
    function (data){
        $("#shi").html(data);
    });
}
function shi()
{
	var shi=$("#shi").val();
	$.get("qu.php",{shi:shi},
	function (data){
		//alert(data);
		$("#qu").html(data);
	});
}
</script>
</body>
</html>

shi.php

<?php
include 'config.php';
$sheng = $_GET['sheng'];
if($sheng == 'sds')
{
    $str = "<option value=''>请选择</option><option value='taian'>泰安</option><option value='jinan'>济南</option>";
    echo $str;
}
if($sheng == 'hns')
{
    $str = "<option value=''>请选择</option><option value='shangqiu'>商丘</option><option value='pingdingshan'>平顶山</option>";
    echo $str;
}
?>

qu.php

<?php
$shi=$_GET['shi'];
if($shi=='taian')
{
	$str="<option value='taishanqu'>泰山区</option><option value='daiyuequ'>岱岳区</option>";
	echo $str;
}
if($shi=='jinan')
{
	$str="<option value='历下区'>历下区</option><option value='历城区'>历城区</option>";
	echo $str;
}
if($shi=='shangqiu')
{
	$str="<option value='睢阳区'>睢阳区</option><option value='梁园区'>梁园区</option>";
	echo $str;
}
if($shi=='pingdingshan')
{
	$str="<option value='新华区'>新华区</option><option value='卫东区'>卫东区</option>";
	echo $str;
}
?>

这是写死的，如果你想写活，就通过sql语句来调用数据库~

ajax+jQuery实现三级联动

猜你喜欢