選擇地點
元件: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>