使用js實現二級選單聯動,看看這些基礎你會不會?

我們在專案開發時經常會遇到省市聯動這種二級選單聯動的動態效果。比如我們選擇了省份的話,省對應的市的資料會在市的下拉框裡自動填充,達到聯動的效果。那麼透過html+js如何實現這樣的效果呢?接下來就跟著小編一起來做一個這樣的省市聯動吧!!!

先定義一個二維陣列儲存省份的資訊:

在頁面定義一個onclick事件進行監聽:

當用戶點選onclick事件,選擇省份資料後,呼叫redirectProvice函式動態地省對應的資料從二維陣列中查詢出來,放到城市資料裡面進行展示。

實現的效果如下:

選擇福建省時:

城市對應的資料:

具體的程式碼如下。

index。js

index。html頁面程式碼

首先在頁面引入index。js程式碼

好了,上面就是使用html+js實現的二級聯動選單的效果,在以後專案開發時可以借鑑一下。希望今天的分享對大家的學習有所幫助,如果有什麼問題也可以在下面留言交流。

相關文章