JavaWeb04-HTML篇笔记（四）

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:}