# 選擇縣市區域(可應用於金流

###### tags: `金流` `縣市區域`

## 1.下載檔案

[檔案下載github](https://github.com/dennykuo/tw-city-selector)
點選code下載資料
只取tw-city-selector/dist/中的tw-city-selector.js
放入專案中的路徑如下👇

****public\js\tw-city-selector.js****
:::spoiler 點我看圖

:::

## 2.輸入標準結構
[檢視用法](https://dennykuo.github.io/tw-city-selector/#/advanced)

html 使用標準版型👇

<div class="city-selector-set">

<!-- 縣市選單 -->
  <div>
    <select class="county"></select>
  </div>
<!-- 區域選單 -->  
  <div>
    <select class="district"></select>
  </div>
<!-- 郵遞區號欄位 (建議加入 readonly 屬性，防止修改) -->
  <div>
    <input class="zipcode" type="text" 
    size="3" readonly placeholder="郵遞區號">
  </div>
  
</div>

html 含有NAME版👇

<div class="city-selector-set form-group col-md-6 ">
    <label for="inputCity">地址</label>

    <div>
        <select class="county form-control 
        shadow-none col-5" name="county " 
        placeholder="城市"></select>
    </div>

    <div>
        <select class="district form-control 
        shadow-none col-5" name="district" 
        placeholder="區域"></select>
    </div>

    <div>
        <input class="zipcode form-control 
        shadow-none col-5" name="zipcode" 
        type="text" size="3" readonly
        placeholder="郵遞區號">
    </div>

    <div>
        <label for="address">街道地址</label>
        <input type="text" class="form-control shadow-none"
        id="address" name="address" 
        placeholder="輸入完整地址">
    </div>

</div>

## 3.引入JS啟用

{{-- 引用地址JS --}}
<script src="{{ asset('js/tw-city-selector.js') }}"></script>

<script>
    new TwCitySelector({
      el: '.city-selector-set',
      elCounty: '.county', // 在 el 裡查找 element
      elDistrict: '.district', // 在 el 裡查找 element
      elZipcode: '.zipcode' // 在 el 裡查找 element
    });
 </script>