简单而实用的jQuery三级链接选择示例

HTML和js部分
复制代码代码如下所示:




SelectList

*边距:0;填充:0;}
。SelectList {宽度:200px;保证金:50px汽车;}






请选择


请选择


请选择




请选择


请选择


请选择



$(函数(){())
$(。SelectList)。每个(函数(){)
区域;
无功areajson;
无功temp_html;
无功oprovince =美元(这)找到(,);
var =(本)4美元。找到(。市);
无功odistrict =美元(这)找到(区);
初始化该省
瓦尔河省=函数(){()
美元。每个(areajson,功能(我省){
temp_html + = +省P + ;
});
OProvince.html(temp_html);
城市();
};
任务/锡蒂
var =函数(){()
temp_html = ;
var n = oprovince.get(0)。SelectedIndex;
美元。每个(areajson {N}。C、功能(我市){
temp_html + = +城市。CT + ;
});
OCity.html(temp_html);
地区();
};
分配/县
var区域=函数(){()
temp_html = ;
var m = oprovince.get(0)。SelectedIndex;
var n = ocity.get(0)。SelectedIndex;
如果(typeof(areajson { } { } M。C。D)= undefined){
ODistrict.css(显示
其他{ }
ODistrict.css(显示
美元。每个(areajson {米},{ }。D、功能(I区){
temp_html + = +区DT + ;
});
ODistrict.html(temp_html);
};
};
选择改变城市
OProvince.change(function(){()
城市();
});
选择城市变化县
OCity.change(function(){()
地区();
});
获取JSON数据
美元。getJSON(URL,功能(数据){
areajson =数据;
省();
});
});
});




JSON文件(区域JSON),这里只是一个示例,根据情况添加或写入
复制代码代码如下所示:
{
{p:江西省

{CT:南昌市
d:
{dt:西湖区},
{dt:东湖区域},
{dt:高技术区}
} },
{CT:赣州市
d:
{dt:瑞金县},
{DT:南丰县},
{DT:全南县}
} }
} },
{p:北京

{CT:东城区},
{CT:西城区}
} },
{p:河北省

{CT:石家庄
d:
{dt:长安区},
{DT:桥东区},
{DT:桥西区}
} },
{CT:唐山市
d:
{dt:滦南县},
{DT:乐亭县},
{dt:迁西县}
} }
} }
}

您最好将它包装为插件,并使其易于调用。