選擇地點
元件:destination001,select002,dialog005
Default
熱門地點:
HTML
    
<div class="tw-form-group">
      <div class="tw-flex tw-items-center">
        <label formLabel for="destination" class="tw-form-label">遊學/打工地點</label>
      </div>
      <div class="tw-mt-8">
        <div class="tw-relative">
          <div class="tw-relative tw-w-full">
            <div destination001 data-type="comp" data-plugin="comp/destination001" data-comp-name="destination001">
              <script destination001DisplayItemTemplate type="text/template">
  <button type="button" destination001DisplayItem data-value="{value}" data-label="{label}" class=" tw-flex tw-h-32 tw-items-center tw-shrink-0 tw-rounded-12 tw-bg-primary-50 tw-px-16 hover:tw-opacity-70 tw-duration-200 tw-will-change-opacity tw-gap-x-4 active:tw-opacity-70">
    <div class="tw-body-l tw-font-medium tw-text-primary-500">{label}</div>
    <div class="tw-h-20 tw-w-20 tw-shrink-0 tw-overflow-hidden tw-text-neutral-700">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7024 2.11908C17.0278 1.79364 17.5555 1.79364 17.8809 2.11908C18.2064 2.44451 18.2064 2.97215 17.8809 3.29759L11.1785 10L17.8809 16.7024C18.2064 17.0278 18.2064 17.5555 17.8809 17.8809C17.5555 18.2064 17.0278 18.2064 16.7024 17.8809L10 11.1785L3.29759 17.8809C2.97215 18.2064 2.44452 18.2064 2.11908 17.8809C1.79364 17.5555 1.79364 17.0278 2.11908 16.7024L8.82149 10L2.11908 3.29759C1.79364 2.97215 1.79364 2.44451 2.11908 2.11908C2.44452 1.79364 2.97215 1.79364 3.29759 2.11908L10 8.82149L16.7024 2.11908Z" fill="#59BE81"/>
        </svg>
    </div>
  </button>
</script>
              <div destination001DisplayInputWrap class="tw-form-wrap tw-group tw-relative tw-h-auto tw-min-h-[42px] tw-p-0" aria-expanded="false">
                <div destination001Trigger aria-expanded="false" class="tw-group tw-relative tw-flex tw-h-full tw-w-full tw-cursor-pointer tw-items-start tw-px-16 tw-py-4 tw-text-left tw-text-neutral-900">
                  <div class="tw-grid tw-gap-8">
                    <div destination001DisplayInput style="display: none" class="tw-mr-4 tw-flex tw-flex-wrap tw-gap-8"></div>
                    <div destination001DisplayPlaceholder class="tw-flex tw-h-32 tw-items-center">
                      <div class="tw-leading-none tw-text-[#9ca3af]">請選擇</div>
                    </div>
                  </div>
                  <!--  -->
                  <div class="tw-relative tw-ml-auto tw-flex tw-h-32 tw-items-center">
                    <div class="tw-h-20 tw-w-20 tw-shrink-0 tw-overflow-hidden tw-text-neutral-700 tw-duration-300 tw-will-change-rotate group-aria-expanded:tw-rotate-180">
                      <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2.73822 6.90423C3.06366 6.5788 3.59129 6.5788 3.91673 6.90423L10.0023 12.9898L16.0879 6.90423C16.4133 6.5788 16.941 6.5788 17.2664 6.90423C17.5919 7.22967 17.5919 7.75731 17.2664 8.08275L10.5916 14.7576C10.2661 15.083 9.7385 15.083 9.41306 14.7576L2.73822 8.08275C2.41278 7.75731 2.41278 7.22967 2.73822 6.90423Z" fill="#3CA368" />
                      </svg>
                    </div>
                  </div>
                </div>
                <!--  -->
              </div>
              <div class="tw-form-wrap tw-hiddenx tw-mt-8">
                <input name="destination" destination001Input type="text" class="tw-form-input" />
              </div>
              <!--  -->
              <div style="display: none" class="tw-form-error-msg tw-mt-2 tw-px-16"></div>
              <!--  -->
              <div destination001Shortcut class=" tw-mt-8 tw-flex tw-gap-x-8">
                <div class="tw-body-m tw-mt-8 tw-shrink-0 tw-text-neutral-600">熱門地點:</div>
                <div class="tw-flex tw-flex-wrap tw-gap-8">
                  <button data-label="日本(本州、九州、四國)" data-value="JP_5__日本(本州、九州、四國)" type="button" class="tw-btn-primary-20 tw-h-32 tw-px-16">日本(本州、九州、四國)</button>
                  <button data-label="韓國" data-value="KR_4__韓國" type="button" class="tw-btn-primary-20 tw-h-32 tw-px-16">韓國</button>
                  <button data-label="澳洲" data-value="AU_9__澳洲" type="button" class="tw-btn-primary-20 tw-h-32 tw-px-16">澳洲</button>
                  <button data-label="美國" data-value="US_6__美國" type="button" class="tw-btn-primary-20 tw-h-32 tw-px-16">美國</button>
                  <button data-label="加拿大" data-value="CA_6__加拿大" type="button" class="tw-btn-primary-20 tw-h-32 tw-px-16">加拿大</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>

  
Method: setValue(string)
              
<script>
  function setValue(value) {
    const target = document.querySelector('[name=destination]')
    target.setValue(value)
  }
</script>
              
                
  <button type="button" class="tw-btn-primary" onclick="setValue('AU_9__澳洲')">AU_9__澳洲</button>
                
                  
  <button type="button" class="tw-btn-primary" onclick="setValue('AU_9__澳洲,JP_5__日本(本州、九州、四國)')">AU_9__澳洲,JP_5__日本(本州、九州、四國)</button>
                  
                    
  <button type="button" class="tw-btn-primary" onclick="setValue('')">清空</button>
                    
dialogDestination HTML
  
<div dialogDestination style="display: none" data-style="bottom-center" data-type="comp" data-plugin="comp/dialog005" data-comp-name="dialog005" data-prevent-init="true">
    <div dialogContent class="tw-relative tw-w-full tw-transform tw-overflow-hidden tw-rounded-t-12 tw-bg-white tw-shadow-4 tw-transition-all lg:tw-max-w-[650px] lg:tw-rounded-12">
      <div dialogDestinationContentWrap class="xtw-h-[456px] tw-relative tw-flex tw-flex-col lg:tw-h-auto lg:tw-max-h-[604px]">
        <div>
          <div select002 data-mode="dialog" data-plugin="comp/select002" data-prevent-init="true" data-type="comp" data-comp-name="select002" class="tw-relative tw-w-full">
            <!-- <div id="debugStr" style="position: fixed; z-index: 999999; background-color: #000; color: #fff"></div> -->
            <script select002TabItemTemplate type="text/template">
                <button select002TabItem data-category="select002-{category}" type="button" class="{class} tw-body-l tw-grow tw-bg-transparent !tw-transion-colors tw-relative  tw-h-42 tw-select-none tw-select-none tw-items-center tw-justify-center tw-rounded-12 tw-px-8 tw-py-8 tw-font-medium tw-leading-none !tw-text-neutral-400 !tw-duration-200 tw-will-change-colors hover:!tw-text-primary-500  active:!tw-text-primary-500 lg:tw-px-16"><div>{label}</div></button>
              </script>
            <script select002DropdownTemplate type="text/template">
                <div select002-dropdown select002-{category}-item >
                    <div select002-dropdown-box class="tw-max-h-[346px] tw-h-[346px] tw-overflow-y-auto tw-pl-12 tw-flex tw-flex-col tw-gap-y-2" role="listbox">
                      {dropdownContent}
                    </div>
                </div>
              </script>
            <!--  -->
            <script select002DropdownItemTemplate type="text/template">
                <button {status} aria-checked="false" aria-selected="false" type="button" dropdownItem data-index="{index}" data-category="select002-{category}" data-block="{block}" data-bubble="{bubble}" data-value="{value}" data-label="{label}" class="tw-group tw-dropdown-item tw-h-52 tw-w-full  aria-selected:tw-bg-primary-100" role="option">
                    <div class="tw-max-w-[560px] tw-w-full tw-h-full tw-mx-auto tw-flex tw-items-center tw-gap-x-8 tw-pl-12">
                      <div dropdownItemIcon class="tw-opacity-[0]  group-aria-selected:tw-opacity-[1] tw-w-24 tw-h-24">
                        <img src="/img/icons/green-check.svg"  />
                      </div>
                      <div class="tw-truncate tw-text-left tw-w-full">{label}</div>
                    </div>
                </button>
              </script>
            <!--  -->
            <!--  -->
            <script select002DisplayItemTemplate type="text/template">
                <button type="button" select002DisplayItem data-value="{value}" data-label="{label}" class=" tw-flex tw-h-32 tw-items-center tw-shrink-0 tw-rounded-12 tw-bg-primary-50 tw-px-16 hover:tw-opacity-70 tw-duration-200 tw-will-change-opacity tw-gap-x-4 active:tw-opacity-70">
                  <div class="tw-body-l tw-font-medium tw-text-primary-500">{label}</div>
                  <div class="tw-h-20 tw-w-20 tw-shrink-0 tw-overflow-hidden tw-text-neutral-700">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7024 2.11908C17.0278 1.79364 17.5555 1.79364 17.8809 2.11908C18.2064 2.44451 18.2064 2.97215 17.8809 3.29759L11.1785 10L17.8809 16.7024C18.2064 17.0278 18.2064 17.5555 17.8809 17.8809C17.5555 18.2064 17.0278 18.2064 16.7024 17.8809L10 11.1785L3.29759 17.8809C2.97215 18.2064 2.44452 18.2064 2.11908 17.8809C1.79364 17.5555 1.79364 17.0278 2.11908 16.7024L8.82149 10L2.11908 3.29759C1.79364 2.97215 1.79364 2.44451 2.11908 2.11908C2.44452 1.79364 2.97215 1.79364 3.29759 2.11908L10 8.82149L16.7024 2.11908Z" fill="#59BE81"/>
                      </svg>
                  </div>
                </button>
              </script>
            <div dropdown class="tw-px-0 tw-py-0">
              <div>
                <div select002Header class="tw-border-b tw-border-neutral-variant-50 tw-px-24 tw-py-16">
                  <div class="tw-mx-auto tw-flex tw-max-w-[560px] tw-items-center tw-gap-x-8">
                    <div class="tw-body-m tw-text-left tw-text-neutral-600">遊學/打工地點</div>
                    <div select002Warning>
                      <div class="tw-flex tw-h-24 tw-items-center tw-justify-center tw-rounded-8 tw-bg-neutral-variant-20 tw-px-8">
                        <div class="tw-body-m tw-text-neutral-700">最多可選5個國家</div>
                      </div>
                    </div>
                  </div>
                  <div class="tw-mx-auto tw-mt-8 tw-max-w-[560px]">
                    <div select002DisplayInputWrap class="tw-form-wrap tw-group tw-relative tw-h-auto tw-min-h-[44px] tw-p-0" aria-expanded="false">
                      <div select002Trigger aria-expanded="false" class="tw-group tw-relative tw-flex tw-h-full tw-w-full tw-items-start tw-px-16 tw-py-6 tw-text-left tw-text-neutral-900">
                        <div class="tw-grid tw-w-full tw-gap-8">
                          <div select002DisplayInput style="display: none" class="tw-mr-4 tw-flex tw-flex-wrap tw-gap-8"></div>
                          <div select002DisplayPlaceholder class="tw-flex tw-h-32 tw-items-center">
                            <input type="text" select002Input placeholder="輸入地點搜尋" class="tw-form-input tw-p-0" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <select select002Select multiple class="tw-absolute tw-h-0 tw-w-0 tw-opacity-0" name="dialog005Destination" id="dialog005Destination">
                      <optgroup label="熱門旅遊地">
                        <option isbubble="N" isblock="N" value="CN_2__中國大陸">中國大陸</option>
                        <option isbubble="N" isblock="N" value="HK_2__香港">香港</option>
                        <option isbubble="N" isblock="N" value="JP_5__日本(本州、九州、四國)">日本(本州、九州、四國)</option>
                        <option isbubble="N" isblock="N" value="JP1_5__日本(北海道)">日本(北海道)</option>
                        <option isbubble="N" isblock="N" value="JP2_5__日本(沖繩)">日本(沖繩)</option>
                        <option isbubble="N" isblock="N" value="KR_4__韓國">韓國</option>
                        <option isbubble="N" isblock="N" value="TH_3__泰國">泰國</option>
                        <option isbubble="N" isblock="N" value="US_6__美國">美國</option>
                      </optgroup>
                      <!--  -->
                      <optgroup label="亞洲">
                        <option isbubble="N" isblock="Y" disabled value="AF_4__阿富汗(拒保)">阿富汗(拒保)</option>
                        <option isbubble="N" isblock="N" value="BD_4__孟加拉">孟加拉</option>
                        <option isbubble="N" isblock="N" value="BN_3__汶萊">汶萊</option>
                        <option isbubble="N" isblock="N" value="BT_4__不丹">不丹</option>
                        <option isbubble="N" isblock="N" value="CN_2__中國大陸">中國大陸</option>
                        <option isbubble="N" isblock="N" value="HK_2__香港">香港</option>
                        <option isbubble="N" isblock="N" value="ID_3__印尼">印尼</option>
                        <option isbubble="N" isblock="N" value="IN_4__印度">印度</option>
                        <option isbubble="N" isblock="N" value="JP_5__日本(本州、九州、四國)">日本(本州、九州、四國)</option>
                        <option isbubble="N" isblock="N" value="JP1_5__日本(北海道)">日本(北海道)</option>
                        <option isbubble="N" isblock="N" value="JP2_5__日本(沖繩)">日本(沖繩)</option>
                        <option isbubble="N" isblock="N" value="KG_4__吉爾吉斯">吉爾吉斯</option>
                        <option isbubble="N" isblock="N" value="KH_3__柬埔寨">柬埔寨</option>
                        <option isbubble="N" isblock="Y" disabled value="KP_4__北韓(拒保)">北韓(拒保)</option>
                        <option isbubble="N" isblock="N" value="KR_4__韓國">韓國</option>
                        <option isbubble="N" isblock="N" value="KZ_4__哈薩克">哈薩克</option>
                        <option isbubble="N" isblock="N" value="LA_3__寮國">寮國</option>
                        <option isbubble="N" isblock="N" value="LK_4__斯里蘭卡">斯里蘭卡</option>
                        <option isbubble="N" isblock="N" value="MM_3__緬甸">緬甸</option>
                        <option isbubble="N" isblock="N" value="MN_4__蒙古">蒙古</option>
                        <option isbubble="N" isblock="N" value="MO_2__澳門">澳門</option>
                        <option isbubble="N" isblock="N" value="MV_4__馬爾地夫">馬爾地夫</option>
                        <option isbubble="N" isblock="N" value="MY_3__馬來西亞">馬來西亞</option>
                        <option isbubble="N" isblock="N" value="NP_4__尼泊爾">尼泊爾</option>
                        <option isbubble="N" isblock="N" value="PH_3__菲律賓">菲律賓</option>
                        <option isbubble="N" isblock="Y" disabled value="PK_4__巴基斯坦(拒保)">巴基斯坦(拒保)</option>
                        <option isbubble="N" isblock="N" value="SG_3__新加坡">新加坡</option>
                        <option isbubble="N" isblock="N" value="TH_3__泰國">泰國</option>
                        <option isbubble="N" isblock="N" value="TJ_4__塔吉克">塔吉克</option>
                        <option isbubble="N" isblock="N" value="TL_3__東帝汶">東帝汶</option>
                        <option isbubble="N" isblock="N" value="TM_4__土庫曼">土庫曼</option>
                        <option isbubble="N" isblock="N" value="UZ_4__烏茲別克">烏茲別克</option>
                        <option isbubble="N" isblock="N" value="VN_3__越南">越南</option>
                      </optgroup>
                      <optgroup label="歐洲">
                        <option isbubble="N" isblock="N" value="AD_7__安道爾">安道爾</option>
                        <option isbubble="N" isblock="N" value="AL_7__阿爾巴尼亞">阿爾巴尼亞</option>
                        <option isbubble="N" isblock="N" value="AT_A__奧地利(申根)">奧地利(申根)</option>
                        <option isbubble="N" isblock="N" value="AX_7__奧蘭群島">奧蘭群島</option>
                        <option isbubble="N" isblock="N" value="BA_7__波赫 (波士尼亞及赫塞哥維納)">波赫 (波士尼亞及赫塞哥維納)</option>
                        <option isbubble="N" isblock="N" value="BE_A__比利時(申根)">比利時(申根)</option>
                        <option isbubble="N" isblock="N" value="BG_A__保加利亞(申根)">保加利亞(申根)</option>
                        <option isbubble="N" isblock="N" value="BV_4__布威島">布威島</option>
                        <option isbubble="N" isblock="Y" disabled value="BY_7__白俄羅斯(拒保)">白俄羅斯(拒保)</option>
                        <option isbubble="N" isblock="N" value="CH_A__瑞士(申根)">瑞士(申根)</option>
                        <option isbubble="N" isblock="N" value="CZ_A__捷克(申根)">捷克(申根)</option>
                        <option isbubble="N" isblock="N" value="DE_A__德國(申根)">德國(申根)</option>
                        <option isbubble="N" isblock="N" value="DK_A__丹麥(申根)">丹麥(申根)</option>
                        <option isbubble="N" isblock="N" value="EE_A__愛沙尼亞(申根)">愛沙尼亞(申根)</option>
                        <option isbubble="N" isblock="N" value="ES_A__西班牙(申根)">西班牙(申根)</option>
                        <option isbubble="N" isblock="N" value="FI_A__芬蘭(申根)">芬蘭(申根)</option>
                        <option isbubble="N" isblock="N" value="FO_7__法羅群島">法羅群島</option>
                        <option isbubble="N" isblock="N" value="FR_A__法國(申根)">法國(申根)</option>
                        <option isbubble="N" isblock="N" value="GB_7__英國">英國</option>
                        <option isbubble="N" isblock="N" value="GG_7__根西島">根西島</option>
                        <option isbubble="N" isblock="N" value="GI_7__直布羅陀">直布羅陀</option>
                        <option isbubble="N" isblock="N" value="GR_A__希臘(申根)">希臘(申根)</option>
                        <option isbubble="N" isblock="N" value="HR_A__克羅埃西亞(申根)">克羅埃西亞(申根)</option>
                        <option isbubble="N" isblock="N" value="HU_A__匈牙利(申根)">匈牙利(申根)</option>
                        <option isbubble="N" isblock="N" value="IE_7__愛爾蘭">愛爾蘭</option>
                        <option isbubble="N" isblock="N" value="IM_7__曼島">曼島</option>
                        <option isbubble="N" isblock="N" value="IS_A__冰島(申根)">冰島(申根)</option>
                        <option isbubble="N" isblock="N" value="IT_A__義大利(申根)">義大利(申根)</option>
                        <option isbubble="N" isblock="N" value="JE_7__澤西島">澤西島</option>
                        <option isbubble="N" isblock="N" value="LI_A__列支敦斯登(申根)">列支敦斯登(申根)</option>
                        <option isbubble="N" isblock="N" value="LT_A__立陶宛(申根)">立陶宛(申根)</option>
                        <option isbubble="N" isblock="N" value="LU_A__盧森堡(申根)">盧森堡(申根)</option>
                        <option isbubble="N" isblock="N" value="LV_A__拉脫維亞(申根)">拉脫維亞(申根)</option>
                        <option isbubble="N" isblock="N" value="MC_A__摩納哥(申根)">摩納哥(申根)</option>
                        <option isbubble="N" isblock="N" value="MD_7__摩爾多瓦">摩爾多瓦</option>
                        <option isbubble="N" isblock="N" value="ME_7__黑山共和國/蒙特內哥羅">黑山共和國/蒙特內哥羅</option>
                        <option isbubble="N" isblock="N" value="MK_7__馬其頓共和國">馬其頓共和國</option>
                        <option isbubble="N" isblock="N" value="MT_A__馬爾他(申根)">馬爾他(申根)</option>
                        <option isbubble="N" isblock="N" value="NL_A__荷蘭(申根)">荷蘭(申根)</option>
                        <option isbubble="N" isblock="N" value="NO_A__挪威(申根)">挪威(申根)</option>
                        <option isbubble="N" isblock="N" value="PL_A__波蘭(申根)">波蘭(申根)</option>
                        <option isbubble="N" isblock="N" value="PT_A__葡萄牙(申根)">葡萄牙(申根)</option>
                        <option isbubble="N" isblock="N" value="RO_A__羅馬尼亞(申根)">羅馬尼亞(申根)</option>
                        <option isbubble="N" isblock="N" value="RS_7__塞爾維亞">塞爾維亞</option>
                        <option isbubble="N" isblock="Y" disabled value="RU_7__俄羅斯(拒保)">俄羅斯(拒保)</option>
                        <option isbubble="N" isblock="N" value="SE_A__瑞典(申根)">瑞典(申根)</option>
                        <option isbubble="N" isblock="N" value="SI_A__斯洛維尼亞(申根)">斯洛維尼亞(申根)</option>
                        <option isbubble="N" isblock="N" value="SJ_7__斯瓦巴和揚馬延島">斯瓦巴和揚馬延島</option>
                        <option isbubble="N" isblock="N" value="SK_A__斯洛伐克(申根)">斯洛伐克(申根)</option>
                        <option isbubble="N" isblock="N" value="SM_A__聖馬利諾(申根)">聖馬利諾(申根)</option>
                        <option isbubble="N" isblock="N" value="TF_4__法屬南部和南極領地">法屬南部和南極領地</option>
                        <option isbubble="N" isblock="Y" disabled value="UA_7__烏克蘭(拒保)">烏克蘭(拒保)</option>
                        <option isbubble="N" isblock="N" value="VA_A__梵蒂岡(申根)">梵蒂岡(申根)</option>
                        <option isbubble="N" isblock="N" value="XK_7__科索沃">科索沃</option>
                      </optgroup>
                      <optgroup label="美洲">
                        <option isbubble="N" isblock="N" value="AG_4__安地卡及巴布達">安地卡及巴布達</option>
                        <option isbubble="N" isblock="N" value="AI_4__安吉拉">安吉拉</option>
                        <option isbubble="N" isblock="N" value="AR_4__阿根廷">阿根廷</option>
                        <option isbubble="N" isblock="N" value="AW_4__阿魯巴">阿魯巴</option>
                        <option isbubble="N" isblock="N" value="BB_4__巴貝多">巴貝多</option>
                        <option isbubble="N" isblock="N" value="BL_4__聖巴瑟米 (聖巴泰勒米)">聖巴瑟米 (聖巴泰勒米)</option>
                        <option isbubble="N" isblock="N" value="BM_4__百慕達">百慕達</option>
                        <option isbubble="N" isblock="N" value="BO_4__玻利維亞">玻利維亞</option>
                        <option isbubble="N" isblock="N" value="BQ_4__荷蘭加勒比區">荷蘭加勒比區</option>
                        <option isbubble="N" isblock="N" value="BR_4__巴西">巴西</option>
                        <option isbubble="N" isblock="N" value="BS_4__巴哈馬">巴哈馬</option>
                        <option isbubble="N" isblock="N" value="BZ_4__貝里斯">貝里斯</option>
                        <option isbubble="N" isblock="N" value="CA_6__加拿大">加拿大</option>
                        <option isbubble="N" isblock="N" value="CL_4__智利">智利</option>
                        <option isbubble="N" isblock="N" value="CO_4__哥倫比亞">哥倫比亞</option>
                        <option isbubble="N" isblock="N" value="CR_4__哥斯大黎加">哥斯大黎加</option>
                        <option isbubble="N" isblock="N" value="CU_4__古巴">古巴</option>
                        <option isbubble="N" isblock="N" value="CW_4__古拉索">古拉索</option>
                        <option isbubble="N" isblock="N" value="DM_4__多米尼克">多米尼克</option>
                        <option isbubble="N" isblock="N" value="DO_4__多明尼加">多明尼加</option>
                        <option isbubble="N" isblock="N" value="EC_4__厄瓜多">厄瓜多</option>
                        <option isbubble="N" isblock="N" value="FK_4__福克蘭群島">福克蘭群島</option>
                        <option isbubble="N" isblock="N" value="GD_4__格瑞那達">格瑞那達</option>
                        <option isbubble="N" isblock="N" value="GF_4__法屬圭亞那">法屬圭亞那</option>
                        <option isbubble="N" isblock="N" value="GL_4__格陵蘭">格陵蘭</option>
                        <option isbubble="N" isblock="N" value="GP_4__瓜地洛普">瓜地洛普</option>
                        <option isbubble="N" isblock="N" value="GT_4__瓜地馬拉">瓜地馬拉</option>
                        <option isbubble="N" isblock="N" value="GY_4__蓋亞那">蓋亞那</option>
                        <option isbubble="N" isblock="N" value="HN_4__宏都拉斯">宏都拉斯</option>
                        <option isbubble="N" isblock="Y" disabled value="HT_4__海地(拒保)">海地(拒保)</option>
                        <option isbubble="N" isblock="N" value="JM_4__牙買加">牙買加</option>
                        <option isbubble="N" isblock="N" value="KN_4__聖克里斯多福及尼維斯">聖克里斯多福及尼維斯</option>
                        <option isbubble="N" isblock="N" value="KY_4__開曼群島">開曼群島</option>
                        <option isbubble="N" isblock="N" value="LC_4__聖露西亞">聖露西亞</option>
                        <option isbubble="N" isblock="N" value="MF_4__聖馬丁 (法屬)">聖馬丁 (法屬)</option>
                        <option isbubble="N" isblock="N" value="MQ_4__馬提尼克島/馬丁尼克">馬提尼克島/馬丁尼克</option>
                        <option isbubble="N" isblock="N" value="MS_4__蒙哲臘/蒙特塞拉特">蒙哲臘/蒙特塞拉特</option>
                        <option isbubble="N" isblock="N" value="MX_4__墨西哥">墨西哥</option>
                        <option isbubble="N" isblock="N" value="NI_4__尼加拉瓜">尼加拉瓜</option>
                        <option isbubble="N" isblock="N" value="PA_4__巴拿馬">巴拿馬</option>
                        <option isbubble="N" isblock="N" value="PE_4__秘魯">秘魯</option>
                        <option isbubble="N" isblock="N" value="PM_4__聖皮耶與密克隆群島">聖皮耶與密克隆群島</option>
                        <option isbubble="N" isblock="N" value="PR_4__波多黎各">波多黎各</option>
                        <option isbubble="N" isblock="N" value="PY_4__巴拉圭">巴拉圭</option>
                        <option isbubble="N" isblock="N" value="SR_4__蘇利南">蘇利南</option>
                        <option isbubble="N" isblock="N" value="SV_4__薩爾瓦多">薩爾瓦多</option>
                        <option isbubble="N" isblock="N" value="SX_4__聖馬丁 (荷屬)">聖馬丁 (荷屬)</option>
                        <option isbubble="N" isblock="N" value="TC_4__特克斯與凱科斯群島/土克凱可群島">特克斯與凱科斯群島/土克凱可群島</option>
                        <option isbubble="N" isblock="N" value="TT_4__千里達及多巴哥">千里達及多巴哥</option>
                        <option isbubble="N" isblock="N" value="UM_4__美國本土外小島">美國本土外小島</option>
                        <option isbubble="N" isblock="N" value="US_6__美國">美國</option>
                        <option isbubble="N" isblock="N" value="UY_4__烏拉圭">烏拉圭</option>
                        <option isbubble="N" isblock="N" value="VC_4__聖文森及格瑞那丁">聖文森及格瑞那丁</option>
                        <option isbubble="N" isblock="Y" disabled value="VE_4__委內瑞拉(拒保)">委內瑞拉(拒保)</option>
                        <option isbubble="N" isblock="N" value="VG_4__英屬維京群島">英屬維京群島</option>
                        <option isbubble="N" isblock="N" value="VI_4__美屬維京群島">美屬維京群島</option>
                      </optgroup>
                      <optgroup label="其他">
                        <option isbubble="N" isblock="N" value="AE_4__阿拉伯聯合大公國">阿拉伯聯合大公國</option>
                        <option isbubble="N" isblock="N" value="AM_4__亞美尼亞">亞美尼亞</option>
                        <option isbubble="N" isblock="N" value="AO_4__安哥拉">安哥拉</option>
                        <option isbubble="N" isblock="N" value="AQ_4__南極">南極</option>
                        <option isbubble="N" isblock="N" value="AS_4__美屬薩摩亞">美屬薩摩亞</option>
                        <option isbubble="N" isblock="N" value="AU_9__澳洲">澳洲</option>
                        <option isbubble="N" isblock="N" value="AZ_4__亞塞拜然">亞塞拜然</option>
                        <option isbubble="N" isblock="Y" disabled value="BF_4__布吉納法索(拒保)">布吉納法索(拒保)</option>
                        <option isbubble="N" isblock="N" value="BH_4__巴林">巴林</option>
                        <option isbubble="N" isblock="Y" disabled value="BI_4__蒲隆地(拒保)">蒲隆地(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="BJ_4__貝南(拒保)">貝南(拒保)</option>
                        <option isbubble="N" isblock="N" value="BW_4__波札那">波札那</option>
                        <option isbubble="N" isblock="N" value="CC_3__科科斯(基林)群島">科科斯(基林)群島</option>
                        <option isbubble="N" isblock="Y" disabled value="CD_4__剛果民主共和國(拒保)">剛果民主共和國(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="CF_4__中非共和國(拒保)">中非共和國(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="CG_4__剛果(布)(拒保)">剛果(布)(拒保)</option>
                        <option isbubble="N" isblock="N" value="CI_4__象牙海岸">象牙海岸</option>
                        <option isbubble="N" isblock="N" value="CK_4__庫克群島">庫克群島</option>
                        <option isbubble="N" isblock="Y" disabled value="CM_4__喀麥隆(拒保)">喀麥隆(拒保)</option>
                        <option isbubble="N" isblock="N" value="CV_4__維德角">維德角</option>
                        <option isbubble="N" isblock="N" value="CX_3__聖誕島">聖誕島</option>
                        <option isbubble="N" isblock="N" value="CY_7__賽普勒斯">賽普勒斯</option>
                        <option isbubble="N" isblock="Y" disabled value="DJ_4__吉布地(拒保)">吉布地(拒保)</option>
                        <option isbubble="N" isblock="N" value="DZ_4__阿爾及利亞">阿爾及利亞</option>
                        <option isbubble="N" isblock="Y" disabled value="EG_4__埃及(拒保)">埃及(拒保)</option>
                        <option isbubble="N" isblock="N" value="EH_4__西撒哈拉">西撒哈拉</option>
                        <option isbubble="N" isblock="Y" disabled value="ER_4__厄利垂亞(拒保)">厄利垂亞(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="ET_4__衣索比亞(拒保)">衣索比亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="FJ_4__斐濟">斐濟</option>
                        <option isbubble="N" isblock="N" value="FM_4__密克羅尼西亞聯邦">密克羅尼西亞聯邦</option>
                        <option isbubble="N" isblock="Y" disabled value="GA_4__加彭(拒保)">加彭(拒保)</option>
                        <option isbubble="N" isblock="N" value="GE_4__喬治亞">喬治亞</option>
                        <option isbubble="N" isblock="N" value="GH_4__迦納">迦納</option>
                        <option isbubble="N" isblock="N" value="GM_4__甘比亞">甘比亞</option>
                        <option isbubble="N" isblock="Y" disabled value="GN_4__幾內亞(拒保)">幾內亞(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="GQ_4__赤道幾內亞(拒保)">赤道幾內亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="GS_4__南喬治亞島及南三明治群島">南喬治亞島及南三明治群島</option>
                        <option isbubble="N" isblock="N" value="GU_4__關島">關島</option>
                        <option isbubble="N" isblock="N" value="GW_4__幾內亞比索">幾內亞比索</option>
                        <option isbubble="N" isblock="N" value="HM_4__赫德島及麥當勞群島">赫德島及麥當勞群島</option>
                        <option isbubble="N" isblock="Y" disabled value="IL_4__以色列(拒保)">以色列(拒保)</option>
                        <option isbubble="N" isblock="N" value="IO_4__英屬印度洋領地">英屬印度洋領地</option>
                        <option isbubble="N" isblock="Y" disabled value="IQ_4__伊拉克(拒保)">伊拉克(拒保)</option>
                        <option isbubble="N" isblock="N" value="IR_4__伊朗">伊朗</option>
                        <option isbubble="N" isblock="N" value="JO_4__約旦">約旦</option>
                        <option isbubble="N" isblock="N" value="KE_4__肯亞">肯亞</option>
                        <option isbubble="N" isblock="N" value="KI_4__吉里巴斯">吉里巴斯</option>
                        <option isbubble="N" isblock="N" value="KM_4__葛摩">葛摩</option>
                        <option isbubble="N" isblock="N" value="KW_4__科威特">科威特</option>
                        <option isbubble="N" isblock="Y" disabled value="LB_4__黎巴嫩(拒保)">黎巴嫩(拒保)</option>
                        <option isbubble="N" isblock="N" value="LR_4__賴比瑞亞">賴比瑞亞</option>
                        <option isbubble="N" isblock="N" value="LS_4__賴索托">賴索托</option>
                        <option isbubble="N" isblock="Y" disabled value="LY_4__利比亞(拒保)">利比亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="MA_4__摩洛哥">摩洛哥</option>
                        <option isbubble="N" isblock="N" value="MG_4__馬達加斯加">馬達加斯加</option>
                        <option isbubble="N" isblock="N" value="MH_4__馬紹爾群島">馬紹爾群島</option>
                        <option isbubble="N" isblock="Y" disabled value="ML_4__馬利(拒保)">馬利(拒保)</option>
                        <option isbubble="N" isblock="N" value="MP_4__北馬里亞納群島">北馬里亞納群島</option>
                        <option isbubble="N" isblock="Y" disabled value="MR_4__茅利塔尼亞(拒保)">茅利塔尼亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="MU_4__模里西斯">模里西斯</option>
                        <option isbubble="N" isblock="Y" disabled value="MW_4__馬拉威(拒保)">馬拉威(拒保)</option>
                        <option isbubble="N" isblock="N" value="MZ_4__莫三比克">莫三比克</option>
                        <option isbubble="N" isblock="N" value="NA_4__納米比亞">納米比亞</option>
                        <option isbubble="N" isblock="N" value="NC_4__新喀里多尼亞">新喀里多尼亞</option>
                        <option isbubble="N" isblock="Y" disabled value="NE_4__尼日(拒保)">尼日(拒保)</option>
                        <option isbubble="N" isblock="N" value="NF_4__諾福克島">諾福克島</option>
                        <option isbubble="N" isblock="Y" disabled value="NG_4__奈及利亞(拒保)">奈及利亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="NR_4__諾魯">諾魯</option>
                        <option isbubble="N" isblock="N" value="NU_4__紐埃">紐埃</option>
                        <option isbubble="N" isblock="N" value="NZ_9__紐西蘭">紐西蘭</option>
                        <option isbubble="N" isblock="N" value="OM_4__阿曼">阿曼</option>
                        <option isbubble="N" isblock="N" value="PF_4__大溪地/法屬玻里尼西亞">大溪地/法屬玻里尼西亞</option>
                        <option isbubble="N" isblock="Y" disabled value="PG_4__巴布亞紐幾內亞(拒保)">巴布亞紐幾內亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="PN_4__皮特肯群島">皮特肯群島</option>
                        <option isbubble="N" isblock="Y" disabled value="PS_4__巴勒斯坦(拒保)">巴勒斯坦(拒保)</option>
                        <option isbubble="N" isblock="N" value="PW_4__帛琉">帛琉</option>
                        <option isbubble="N" isblock="N" value="QA_4__卡達">卡達</option>
                        <option isbubble="N" isblock="N" value="RE_4__留尼旺">留尼旺</option>
                        <option isbubble="N" isblock="N" value="RW_4__盧安達">盧安達</option>
                        <option isbubble="N" isblock="N" value="SA_4__沙烏地阿拉伯">沙烏地阿拉伯</option>
                        <option isbubble="N" isblock="N" value="SB_4__索羅門群島">索羅門群島</option>
                        <option isbubble="N" isblock="N" value="SC_4__塞席爾">塞席爾</option>
                        <option isbubble="N" isblock="Y" disabled value="SD_4__蘇丹(拒保)">蘇丹(拒保)</option>
                        <option isbubble="N" isblock="N" value="SH_4__聖赫勒拿島">聖赫勒拿島</option>
                        <option isbubble="N" isblock="N" value="SL_4__獅子山">獅子山</option>
                        <option isbubble="N" isblock="Y" disabled value="SN_4__塞內加爾(拒保)">塞內加爾(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="SO_4__索馬利亞(拒保)">索馬利亞(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="SS_4__南蘇丹共和國(拒保)">南蘇丹共和國(拒保)</option>
                        <option isbubble="N" isblock="N" value="ST_4__聖多美普林西比">聖多美普林西比</option>
                        <option isbubble="N" isblock="Y" disabled value="SY_4__敘利亞(拒保)">敘利亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="SZ_4__史瓦帝尼王國">史瓦帝尼王國</option>
                        <option isbubble="N" isblock="Y" disabled value="TD_4__查德(拒保)">查德(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="TG_4__多哥(拒保)">多哥(拒保)</option>
                        <option isbubble="N" isblock="N" value="TK_4__托克勞群島">托克勞群島</option>
                        <option isbubble="N" isblock="Y" disabled value="TN_4__突尼西亞(拒保)">突尼西亞(拒保)</option>
                        <option isbubble="N" isblock="N" value="TO_4__東加">東加</option>
                        <option isbubble="N" isblock="N" value="TR_4__土耳其">土耳其</option>
                        <option isbubble="N" isblock="N" value="TV_4__吐瓦魯">吐瓦魯</option>
                        <option isbubble="N" isblock="Y" disabled value="TZ_4__坦尚尼亞(拒保)">坦尚尼亞(拒保)</option>
                        <option isbubble="N" isblock="Y" disabled value="UG_4__烏干達(拒保)">烏干達(拒保)</option>
                        <option isbubble="N" isblock="N" value="VU_4__瓦努阿圖 (萬那杜)">瓦努阿圖 (萬那杜)</option>
                        <option isbubble="N" isblock="N" value="WF_4__瓦利斯和富圖納">瓦利斯和富圖納</option>
                        <option isbubble="N" isblock="N" value="WS_4__薩摩亞">薩摩亞</option>
                        <option isbubble="N" isblock="Y" disabled value="YE_4__葉門(拒保)">葉門(拒保)</option>
                        <option isbubble="N" isblock="N" value="YT_4__馬約特">馬約特</option>
                        <option isbubble="N" isblock="N" value="ZA_4__南非">南非</option>
                        <option isbubble="N" isblock="N" value="ZM_4__尚比亞">尚比亞</option>
                        <option isbubble="N" isblock="Y" disabled value="ZW_4__辛巴威(拒保)">辛巴威(拒保)</option>
                      </optgroup>
                    </select>
                  </div>
                  <div select002Tab class="tw-relative tw-mx-auto tw-mt-16 tw-flex tw-max-w-[560px]">
                    <div select002TabBg class="tw-absolute tw-bottom-0 tw-left-0 tw-top-0 tw-my-auto tw-h-42 tw-w-0 tw-rounded-12 tw-bg-primary-200 tw-py-16 tw-transition-[left,width] tw-duration-200"></div>
                    <div select002TabItemHolder class="tw-relative tw-flex tw-w-full tw-justify-between tw-gap-8 tw-rounded-16 tw-border-1 tw-border-neutral-variant-100 tw-p-4"></div>
                  </div>
                </div>
                <!--  -->
                <div select002TabContentHolder></div>
                <div select002Footer class="tw-flex tw-justify-center tw-border-t tw-border-neutral-variant-50 tw-px-36 tw-py-16">
                  <button select002Submit type="button" class="tw-btn-primary tw-w-full tw-max-w-[560px]">確認</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button type="button" dialogClose class="tw-dialog-close">
          <img src="/img/icons/black-close.svg" />
        </button>
      </div>
    </div>
  </div>
          
會員登入
網路會員可直接登入,加速您投保流程
請使用「新式居留證統一證號」重新註冊會員,或前往移民署換發中華民國居留證以取得新證號。若持舊式居留證,為避免保險中斷,請親自前往本公司服務據點辦理重新投保。
dsdsdsdsdss
保存試算
請提供聯繫資料,以便寄送本次試算內容連結。透過專屬連結回官網投保,無需重新輸入資料,且可享有線上投保優惠,有效期限至2024/01/10中午12:00止
請輸入收件者名稱
請輸入收件者的手機號碼
請輸入收件者的電子信箱
繼續投保
請輸入身分證/居留證號碼
請輸入共16碼數字
僅供於本站保存試算過的客戶使用。
您要繼續使用嗎?
為了您的資料安全,系統會將一段時間未使用者登出,若仍需使用請點選「繼續使用」,否則將於24秒後自動登出。
選擇日期
手機截圖縮小教學
手機截圖方法
步驟1. 於相簿中打開欲上傳的要保書照片或PDF檔
步驟2. 擷取手機螢幕上的畫面
步驟3. 上傳擷取後的相片
適用iPhone X/XR/XS 或以上機型
同時按下「電源鍵」與左邊的「上音量鍵」擷取螢幕
適用iPhone 6/7/8/SE 等機型
同時按下「電源鍵」與「Home 鍵」擷取螢幕
COSTCO會員卡驗證
如何查詢卡號
COSTCO金星或商業會員卡
共11碼
COSTCO聯名卡
共11碼
若您有任何疑問,請撥打好市多客服電話:(02)449-9909
投保說明
投保規定
01
提供承保年齡為18足歲至50歲網路幫自己(要保人、被保險人為同一人)投保此專案,且不提供外籍人士投保
02
投保時,要保人、被保險人須身在台、澎、金、馬等地區方可投保。若投保當下要保人、被保險人已不在前述地區,本公司將不予理賠
03
身故受益人限法定繼承人、直系血親(如父母、子女、祖父母)或配偶
04
若被保險人於起保日已懷孕,請前往臨櫃或洽業務員辦理本公司營業據點
05
因應主管機關規範,即日起,被保險人以網路方式投保之傷害醫療實支實付保險者,重疊的保險期間內以1張為限。申領保險金時,須提供醫療費用明細正本或收據正本
保額限制
傷害險網路投保同業合計上限:既有客戶600萬、非既有客戶300萬。
請確認您的保障內容
遊學/打工地點
澳洲
投保天數
365天
保險期間
2024/01/09 24時 ~
2025/01/09 24時
此專案目前無續保服務,到期後如有保障需求,需身於台、澎、金、馬地區重新投保。
遊學/打工地點
最多可選5個國家