1.1 案例四:使用JQuery完成省市二级联动:1.1.1 需求:
在注册页面上籍贯的信息,需要用到省市联动效果.
1.1.2 分析:1.1.2.1 技术分析:
【JQuery的DOM操作】
* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
【JQuery的遍历】
遍历的方式一:
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
$(function(){
var arrs = new Array("张森","张凤","张芙蓉");
// 将这个数组转成JQ的对象使用each方法.
/*$(arrs).each(function(i,n){
alert(i+" "+n);
});*/
$.each(arrs,function(i,n){
alert(i+" "+n);
});
});
1.1.2.2 步骤分析:
【步骤一】:引入注册页面,引入jq的js.
【步骤二】:获得到第一个下拉列表,change事件.
【步骤三】:获得到被选中的下拉列表的值.
【步骤四】:去数组中进行比对.
【步骤五】:将数组中的值遍历获得到.
【步骤六】:创建元素,创建文本,将文本添加到元素中,将元素添加到第二个列表中.
1.1.3 代码实现:
<script>[/align] $(function(){
// 定义数组:
/*var arrs = new Array(5);
arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
arrs[4] = new Array("长春市","吉林市","四平市","延边市");*/
var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];
var $city = $("#city");
// 获得代表省份的下拉列表:
$("#province").change(function(){
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍历并且判断:
$.each(cities,function(i,n){
// 判断:
if(i == val){
$(n).each(function(j,m){
// alert(j+" "+m);
$city.append("<option>"+m+"</option>");
});
}
});
});
});
</script>
{:9_565:}
转载于:https://blog.51cto.com/13517854/2114306