这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家分享了 JavaScript 编写三级联动简单案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
刚给学妹写了个简单的地区的三级联动简单案例,分享给正在学习的朋友参考下
- <html>
- <head>
- <!--导入jquery-->
- <script type="text/javascript" src="jquery1.7.1.js">
- </script>
- </head>
- <script type="text/javascript">
- $(function() { //页面加载
- loaddata('gj', '国家的请求url', '查所有id随便给反正后台不需要','省份','国家'); //查询所有国家,并加载到国家下拉框中
- $("#gj").change(function() { //国家的值改变事件
- loaddata('sf', '省份的请求url', '国家id', '省份'); //查询当前国家下的所有省份,并加载到省份下拉框中
- }
- $("#sf").change(function() { //省份的值改变事件
- loaddata('sj', '省份的请求url', '省份id','市级'); //查询当前省份下的所有市,并加载到市下拉框中
- }
- });
- //数据加载
- function loaddata(eleid, url, id, type) {
- $.ajax({
- type: 'get',
- url: url,
- data: {
- id: id
- } //参数
- success: function(data) {
- if (type == '国家'){ //如果是国家
- $("#" + eleid).html(""); //先清空国家
- $("#sf").html(""); //再清空省份
- $("#sj").html(""); //最后清空市
- }
- else if (type == '省份') { //如果是省
- $("#" + eleid).html(""); //先清空省份
- $("#sj").html(""); //再后清空市
- } else if (type == '市级') { //如果是市级
- $("#" + eleid).html(""); //清空市
- }
- $("#" + eleid).append('<option>请选择</option>');
- //需要注意的是如果后台传来的data数据不一致,需先转换再遍历
- for (var i = 0; i < data.length; i++) { //再加载数据
- $("#" + eleid).append('<option value="' + data.选择的值 + '">' + data.显示的值 + '</option>'); //加载数据
- }
- },
- error: function() {
- //请求出错处理
- }
- });}
- </script>
- <body>
- <select id="gj">
- <option>
- 请选择
- </option>
- </select>
- <select id="sf">
- <option>
- 请选择
- </option>
- </select>
- <select id="sj">
- <option>
- 请选择
- </option>
- </select>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0522/329334.html