介绍 & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title>
,& lt; script src=? ./jquery-1.11.2.min.js"祝辞& lt;/script>
,& lt;/head>
,& lt; body>
,& lt; select id=皊heng"祝辞& lt;/select>
,& lt; select id=皊hi"祝辞& lt;/select>
,& lt; select id=皅u"祝辞& lt;/select>
,& lt;/body>
& lt;/html>
& lt; script 类型=拔谋?javascript"祝辞,
,美元(文档)时函数(e) {,
,//输出省
,var code =,“0001”;
$ . ajax({大敌;
异步:假的,才能//取才能消异步
url:才能“chuli.php",
数据:才能}{代码:代码,
类型:才能“POST",
数据类型:才能“TEXT",
成功:函数才能(数据){,,,
,,var hang =, data.trim () .split(“|“);,//修剪()去空格
,才能var str=啊?
,,(var 我=0;i“;
,,}
,,美元(“# sheng") . html (str);,,
,,},,,
,});//输出市
,$ (“# sheng") .click(函数(){,
,var code2=$ (“# sheng") .val (),,
,
,. ajax({美元
异步:假的,才能
url:才能“chuli.php",
数据:才能{代码:code2},
类型:才能“POST",
数据类型:才能“TEXT",
,成功:函数(data2) {
,
var 才能;hang2 =, data2.trim () .split (“|“);
,
var 才能;str2 =?”;
,,(var 我=0;i“;
,,}
美元才能(“# shi") . html (str2);
,,},
,});
,})//输出区县
$ (“# shi") .click(函数(){
,var code3=$ (“# shi") .val ();
,
,. ajax({美元
异步:假的,才能
url:才能“chuli.php",
数据:才能{代码:code3},
类型:才能“POST",
数据类型:才能“TEXT",
成功:才能函数(data3) {
var 才能;hang3 =, data3.split (“|“);
var 才能;str3 =?”;
,,(var 我=0;i“;
,,}
美元才能(“# qu") . html (str3);
,,},
,});
,})
})
& lt;/script> & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title> & lt; br>//引入jquery包
,& lt; script https://www.yisu.com/zixun/src=" . ./jquery-1.11.2.min.js ">
//引用我们自己封装的js文件
这期内容当中小编将会给大家带来有关如何在jquery中使用ajax实现一个三级联动功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强>第一种方式:没有用到封装,数据读取较慢,可以看看原理,这样在第二种方式封装时就容易多了。
代码如下:
期间出现的问题:每个下拉列表的第一个数据输不出来:是因为每个下拉列表的第一个数据的价值值都带有空格! ! !所以在输出数据时要去空格! ! !
数据返回的值可能带有空格换行等,所以要用修剪()方法去空格! ! !
<强>第二种方式:强封装成插件,以后可以随时调用(重要)
(1)主页面:
//引用我们自己封装的js文件
