[jQuery]select無限聯動-使用json數據

在許多購物網站都經常會看到聯動選單,這讓我很好奇到底該怎麼實現呢??於是爬了很多文章,卻發現似乎很少無限聯動的,大多是二層聯動、三層聯動,或者是非常複雜的無限聯動,實在讓我不理解阿~~~所以只好自己動手做啦!! 哈哈(做的不是很好)

無限聯動原理:
以json作為數據源,當select改變時,以jQuery判斷條件加載下一層子分類。

這個範例目前是純前端的,若要跟PHP搭配也是可以的,只要將所需的資料輸出成json格式即可!!

HTML部分

 

Javascript部分

引入jQuery

json數據源

jQuery聯動主程式

 

實例測試:

 

 

 

完整代碼:

這個無限聯動雖然會工作,但肯定還是有些bug存在啦~~先這樣以後再改啦!!

最後的最後,難得Aidec自己克服惰性,原創了一段小程式,所以要引用請註明來源出處ㄚㄚㄚㄚ!!!! 謝謝啦

感謝您的閱讀,請用力地分享讓大家知道吧~~

Aidec Li
學我所見,寫我所學。凡事略懂略懂~~
更多 Aidec Li 的文章...

推薦文章

發表評論