实现了京东商城与省城市联动菜单
运行效果的截图如下:
具体代码如下:
文件
区域黎{
浮点数:左;
宽度:15%;
列表样式:无;
行高:30px;
填料:2px 15px;
白色的空间:不换行;
}
区域李{
文字装饰:无;
字体大小:14px;
}
区域李A:悬停{
背景颜色:# 5bb75b;
}
省
$(函数(){())
北京省= { var,'天津','山东','河南','河北','山西','湖北','湖南','江西','浙江','上海','安徽','广东','广西','福建','宁夏','重庆','四川','西藏','海南','香港','澳门','内蒙古','陕西','甘肃','黑龙江','辽宁','吉林' };
广州,深圳,东莞;
宝安,罗湖,福田;
$('地址')。Bind('focus',函数()){
var $ = $(这个);
$(# addressinfo)。Css({
上图:this.offset美元()+()this.outerheight顶部美元,
左:this.offset美元(左)。
})显示();
});
provinces_li = $(var $'。区> UL);
每个(省,职能(e){)
provinces_li.append美元(+这+);
});
var I=0;
$(区域)
制表符()
,(听到咔哒声,'省',功能()){
获取当前对象
var $ = $(这个),
标签= $(美元this.parents '。selectaddress,DIV) / /添加
$ = $('),
美元= $('');
tabs.children美元(':情商(0))。儿童(':GT(0))删除();
tabs.children美元('div:GT(0))删除();
每个遍历、赋值
/ /这是最好的,代码,名称ul.append(+姓名+本。);
$(每个城市、函数(){(){
ul.append美元(+这+);
});
tabs.children美元('ul)。追加(城市地区);
tabs.append美元(美元div.addclass('region)。追加($ UL));
元标签
制表符()
。标签('option',活动',1)
。数据('address,this.text美元());
})
,(一','。城市功能()){
var $ = $(这个),
标签= $(美元this.parents '。selectaddress),
$ = $('),
$ = $(');
tabs.children美元('ul)。儿童(':情商(2))删除();
tabs.children美元('div:情商(2))删除();
++;
如果(i = 1){ / /确定是否从属
$(每个县、函数(){(){
ul.append美元(+这+);
});
tabs.children美元('ul)。追加(县域);
tabs.append美元(美元div.addclass('region)。追加($ UL));
元标签
制表符()
。标签('option',活动',2)
。数据('address,tabs.data美元('address ')+/+ this.text美元());
其他{ }
获取文本框的值赋值和
$('地址'),瓦迩(tabs.data美元('address ')+/+ this.text美元());
tabs.parent美元()藏();
}
})
,(一','。县,函数()){
var $ = $(这个),
标签= $(美元this.parents '。selectaddress);
$('地址'),瓦迩(tabs.data美元('address ')+/+ this.text美元());
tabs.parent美元()藏();
})
;
$(document)。Bind(听到咔哒声,功能(e){ {)
目标= $(var $ e.target),
addressinfo = $(# addressinfo);
如果(!target.hasclass美元('selectaddress '))
target.parents美元('。selectaddress(= =)。大小0)
!$网($('地址'))
addressinfo.is(':可见)){
$(# addressinfo)隐藏();
}
});
})
源代码下载:jQuery实现的京东商城省市联动菜单
希望本文能帮助您学习Javascript程序设计。