JavaWeb04-HTML篇筆記(四)
阿新 • • 發佈:2018-05-09
Java1.1 案例四:使用JQuery完成省市二級聯動:1.1.1 需求:
在註冊頁面上籍貫的信息,需要用到省市聯動效果.
1.1.2 分析:1.1.2.1 技術分析:
【JQuery的DOM操作】
在註冊頁面上籍貫的信息,需要用到省市聯動效果.
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篇筆記(四)