1. 程式人生 > >JavaWeb04-HTML篇筆記(四)

JavaWeb04-HTML篇筆記(四)

Java

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

JavaWeb04-HTML篇筆記(四)