本文主要為大家詳細介紹了jquery+ajax實現省市區三級連動的相關代碼,包括封裝和不封裝兩種方式,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助大家。
首先,要實現如下圖效果,
1、要理清思路:
先做出三個下拉式選單- ---根據第一個下拉式選單的value值取得第二個下拉清單的內容,第三個同理。
2、用到的資料庫表:Chinastates表
#規則:根據國家級(中國)的areacode查詢省級(如:北京) ;根據省級的areacode查詢市級(如:北京市轄);根據市級的areacode查詢區級(如東城區)
第一種方式:沒有用到封裝,資料讀取較慢,可以看看原理,這樣在第二種方式封裝時就容易多了。
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
|
期間出現的問題:每個下拉清單的第一個資料輸不出來:是因為每個下拉清單的第一個資料的value值都帶有空格! ! !所以在輸出data時要去空格! ! !
data傳回的值可能帶有空格換行等,所以要用trim()方法去空格! ! !
第二種方式:封裝成插件,以後可以隨時呼叫(重要)
(1)主頁:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
(2)我們自己封裝的js外掛程式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
|
其次就是處理頁面(兩種方法都用到的):chuli. php
1 2 3 4 5 6 7 |
|
最後就是封裝的類別檔案:DB.class.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
相關推薦:
以上是jquery和ajax實現省市區三級連動封裝和不封裝兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!