本篇内容介绍了“如何用jquery实现省市区联动”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
博山网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
用jquery实现省市区联动的方法：1、创建一个HTML示例文件；2、在js文件中通过“$(function() {for(var i = 0; i < prvo.length; i++) {...}}”方法实现省市区联动即可。
本文操作环境：windows7系统、jquery-2.1.4版、DELL G3电脑
怎么用jquery实现省市区联动？
使用jQuery实现省市区三级联动菜单
通过jQuery实现省市三级联动菜单,有不足得地方还望大佬多多指导
HTML页面
省市区联动菜单
js页面
var prvo = [
"山西", "四川"];var cit = [
["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]];var dis = [
[
["小店区", "迎泽区"],
["吕梁1", "吕梁2"],
["临汾1", "临汾2"],
["运城1", "运城2"],
["阳泉1", "阳泉2"]
],
[
["成都1", "成都2"],
["绵阳1", "绵阳2"],
["雅安1", "雅安2"],
["乐山1", "乐山2"],
["眉山1", "眉山2"]
]]$(function() {
//初始化省份
for(var i = 0; i < prvo.length; i++) {
//每次循环加一个option标签
$("#prvoince").append("")
}
//---on---在选择元素上绑定一个或多个事件的事件处理函数
//加入change事件使在省发生改变时 发生改变
$("#prvoince").on('change', function() {
//清除元素,将上一次选择的内容清除掉,开始新一轮的选择
//$('#city').empty()
$('#city').text(' ');
$('#district').text(' ');
//利用选择器中的 :selected 方法匹配到所有的元素,然后再用index方法获得下标
//得到被选中省份的下标
var proIndex = $("#prvoince option:selected").index();
var citys = cit[proIndex - 1]
for(var i = 0; i < citys.length; i++) {
$("#city").append("")
//[this.value]
}
})
$("#city").on('change',function(){
$("#district").empty()
var proIndex = $("#prvoince option:selected").index();
var citIndex = $("#city option:selected").index()
var distr = dis[proIndex - 1][citIndex]
for (var i = 0; i < distr.length; i++) {
$("#district").append("")
}
})})“如何用jquery实现省市区联动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
当前标题：如何用jquery实现省市区联动
文章URL：
http://chengdu.cdxwcx.cn/article/gohijc.html
