資訊分享

Technology share

推薦好用的『台灣縣市選單』tw-city-selector

Oct 4, 2021

台灣縣市二級選單

https://dennykuo.github.io/tw-city-selector/#/

 

使用方式很簡單
可以透過套件管理工具安裝(這邊提供三種)

  • yarn add tw-city-selector
  • npm install tw-city-selector --save
  • bower install tw-city-selector --save

 

安裝完畢之後,就是在你的檔案中引用

  • 可以引用在script之中
  • import TwCitySelector from './tw-city-selector.js'; (此為es6 module)
  • var TwCitySelector = require('./tw-city-selector.js'); (也可以這樣)

 

 

以上步驟都完成之後,就可以在htm檔案中新增元件。

這是最簡易的用法,還有很多設定可以設置,像是增加郵遞區號、限制可選擇的縣市以及區域。

也可以透過class name去控制你想要的樣式,如果你是要套用bootstrap的話只需要在element tag 的地方新增 data-bootstrap-style 屬性,就會自動生成了。
這個縣市選單真的是非常方便,推薦給大家!