HTML笔记 ·

城市三级联动查询

很多实现三级联动查询的方式是通过数据库的方式查询的,但是有时候我们查询的不一定是城市三级联动,有可能是其他的三级联动查询,那么数据库的修改就成了大问题。今天我来给大家介绍一种无刷新的js实现三级联动查询方法,例子就是城市的三级联动。我们先看一下主页html代码:

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="area.js"></script>

<script>
window.onload=function(){
	showLocation();
}
</script>
</head>
<body>
<form>
<select id="loc_province"><option>省份</option></select>
<select id="loc_city"> <option>城市</option></select>
<select id="loc_town"><option>县市</option></select>
</form>
</body>
</html>

在这里需要引入area.js文件,由于在文件中获取的select标签的id为上述三个id,所以在html代码中不要修改这三个id,否则代码无法正常运行。那么当我们需要的三级联动不是城市的时候该怎么办呢,我们所需要修改的就只是js文件里的地名了,可能会有些繁琐,但是理解起来比较容易。由于内容比较多,在这里我就不贴出具体代码了,需要的朋友可以下载下来看看,本站提供下载链接。

参与评论