A下拉霸
<div class="col-md-6">
<label for="contact:fromlan">Source Language <span class="red">*</span></label>
<div class="bfh-selectbox" data-name="From_Language_Id" id="FromLanItemParent">
<!--FromLanItem S-->
<div data-value="{Id}"><img src="assets/images/_smarty/flags/{Image}" alt="{Abbreviation}"> {LanguageName}</div>
<!--FromLanItem E-->
</div>
</div>
自動生成的下拉霸
1 name 要用 data-name=""來設定
2 完全沒有選擇的時候可能會回傳空值
套件來源
http://bootstrapformhelpers.com/select/
B電話號碼
<label for="contact_department">Your Phone Number </label>
<div>
<input id="phone" name="phone" type="tel">
</div>
<div style="display:none">
<input id="PhoneCountry" name="PhoneCountry" type="">
</div>
<script src="/assets/build/js/intlTelInput.js"></script>
<script>
var input = document.querySelector("#phone");
var iti1 = window.intlTelInput(input, {
// allowDropdown: false,
// autoHideDialCode: false,
// autoPlaceholder: "off",
// dropdownContainer: document.body,
// excludeCountries: ["us"],
// formatOnDisplay: false,
// geoIpLookup: function(callback) {
// $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
// var countryCode = (resp && resp.country) ? resp.country : "";
// callback(countryCode);
// });
// },
// hiddenInput: "full_number",
// initialCountry: "auto",
// localizedCountries: { 'de': 'Deutschland' },
// nationalMode: false,
// onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
placeholderNumberType: "MOBILE",
// preferredCountries: ['cn', 'jp'],
separateDialCode: true,
utilsScript: "/assets/build/js/utils.js",
});
input.addEventListener("countrychange", function () {
$('#PhoneCountry').val(JSON.stringify(iti1.getSelectedCountryData()))
// do something with iti.getSelectedCountryData()
});
</script>
需要用另一個欄位來記錄電話號碼的國家資料
套件的來源
https://github.com/jackocnr/intl-tel-input