本文实例为大家分享了jQuery实现简单三级联动的具体代码,供大家参考,具体内容如下
首先写一个JSON数据
(
{
“省”:“吉林省”,
“城市”:(
{
“城市”:“长春市”,
“县”:["朝阳区”,“经济开发区”,“高新区”)
}，
{
“城市”:“吉林市”,
“县”:["东城区”,“经济开发区”,“老城区”)
}，
{
“城市”:“白山市”,
“县”:["二道区”、“河东区”,“高新区”)
｝
]
}，
{
“省”:“辽宁省”,
“城市”:(
{
“城市”:“沈阳市”,
“县”:["朝阳区”,“经济开发区”,“高新区”)
}，
{
“城市”:“大连市”,
“县”:["东城区”,“经济开发区”,“老城区”)
}，
{
“城市”:“铁岭市”,
“县”:["二道区”、“河东区”,“高新区”)
｝
]
}，
{
“省”:“山东省”,
“城市”:(
{
“城市”:“青岛市”,
“县”:["朝阳区”,“经济开发区”,“高新区”)
}，
{
“城市”:“济南市”,
“县”:["东城区”,“经济开发区”,“老城区”)
}，
{
“城市”:“威海市”,
“县”:["二道区”、“河东区”,“高新区”)
｝
]
｝
)
然后用Ajax动态获取JSON文件中的数据
<强>完整代码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”/比;
& lt; title>三级联动& lt;/title>
& lt;/head>
& lt; body>
& lt; !——三级联动——两个二级联动——比;
& lt;选择id=笆 北?
& lt;选项值=" "祝辞——& lt;/option>
& lt;/select>
& lt;选择id="城市"比;
& lt;选项值=" "祝辞——& lt;/option>
& lt;/select>
& lt;选择id=跋亍北?
& lt;选项值=" "祝辞——& lt;/option>
& lt;/select>
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery-1.12.4.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/js/createXMLHttpRequest.js "祝辞& lt;/script>
& lt; script>
var=$ $省(“#”);
var城市=美元(“#城市”);
var县美元=$(" #县");
var json;
美元.getJSON(“数据/server1。json”功能(数据){//把数据保存到json全局变量中
json=数据;//遍历数据数据
美元。每个(数据、函数(指数、obj) {//获取所有的省份信息
var provinceName=obj.province;//console.log (provinceName);//将省份信息添加到对应的选择元素中
province.append美元(
“& lt;选项值=" https://www.yisu.com/zixun/$ {provinceName} "在$ {provinceName} & lt;/option>”
）;
}）;
美元。改变(函数(){//将城市下拉列表的选项清空
美元city.empty ();
美元city.append (' & lt;选项值="祝辞——& lt;/option>”);//获取到所选择的城市的文本信息
var provinceElementName=$(这)定格(“选择:选择”)。text ();//console.log (provinceElementName);
美元。每个(json函数(指数、obj) {
var provinceName=obj.province;//console.log (provinceName);
如果(provinceElementName===provinceName) {//获取到城市数组集合
var城市=obj.cities;//遍历城市数组集合
美元。每个(城市、函数(指数、obj) {//console.log (obj.city);//获取到城市名称
var cityName=obj.city;//将该省对应的城市名称添加到对应的选择中
city.append美元(
“& lt;选项值=" https://www.yisu.com/zixun/$ {cityName} "在$ {cityName} & lt;/option>”
）;
}）;
｝
}）;
}）;
美元的城市。改变(函数(){//将区级下拉列表的选项清空
美元county.empty ();
美元county.append (' & lt;选项值="祝辞——& lt;/option>”);//获取到所选择的城市的文本信息
var cityElementName=$(这)定格(“选择:选择”)。text ();//console.log (cityElementName);
美元。每个(json函数(指数、obj) {//获取该省对应的所有的城市信息
var城市=obj.cities;//console.log(城市);
美元。每个(城市、函数(指数、cityObj) {//console.log (cityObj.city);
var cityName=cityObj.city;
如果(cityElementName===cityName) {//获取到区级数组集合//console.log (cityObj.counties);
var县=cityObj.counties;//遍历区级数组集合
美元。各(县、函数(指数、价值){//获取到区级名称//console.log(价值);//将该城市对应的区级名称添加到对应的选择元素中
美元county.append (' & lt;选项值=" https://www.yisu.com/zixun/$ {value} "在$ {value} & lt;/option>”);
}）;
｝
}）;
}）;
}）;
}）;
& lt;/script>
& lt;/body>
& lt;/html>
