使用js實現二級選單聯動,看看這些基礎你會不會?
我們在專案開發時經常會遇到省市聯動這種二級選單聯動的動態效果。比如我們選擇了省份的話,省對應的市的資料會在市的下拉框裡自動填充,達到聯動的效果。那麼透過html+js如何實現這樣的效果呢?接下來就跟著小編一起來做一個這樣的省市聯動吧!!!
先定義一個二維陣列儲存省份的資訊:
在頁面定義一個onclick事件進行監聽:
當用戶點選onclick事件,選擇省份資料後,呼叫redirectProvice函式動態地省對應的資料從二維陣列中查詢出來,放到城市資料裡面進行展示。
實現的效果如下:
選擇福建省時:
城市對應的資料:
具體的程式碼如下。
index。js
index。html頁面程式碼
首先在頁面引入index。js程式碼
好了,上面就是使用html+js實現的二級聯動選單的效果,在以後專案開發時可以借鑑一下。希望今天的分享對大家的學習有所幫助,如果有什麼問題也可以在下面留言交流。
相關文章
- 2021-09-01這是什麼夢幻聯動?百威為肖戰承包整條街,隅田川承包整個商圈
- 2021-08-06“吃雞”8.6奧特曼聯動正式登場!“夏日玩法”也將同時上線!
- 2021-08-04中國人均GDP十強省份: 湖北領先山東, 安徽湖南躋身前十
- 2021-06-267月上線兩款聯動面板,全拿下得2140點券,暗影遊獵確定返場時間
- 2021-04-19迷你世界 全新外掛包功能 無中生有秒得道具