自动货币选择器正在刷新页面



我有一个货币选择器功能,可以自动检测用户的位置并更新网站的货币&CCD_ 1在加载时和CCD_。

问题是,当我运行代码时,页面会自然刷新。如果用户更改#currency_form中的选择器值,我该如何更改代码,以便在加载时更新货币和选择器?

提交表单将刷新页面并更新货币/位置。这需要在CCD_ 4与位置&CCD_ 5更改时,因为它将更改网站上显示的货币。

window.addEventListener('DOMContentLoaded', function() {
(function($) {
$(document).ready(function(e) {
var currmap = {"BD": "BDT", "BE": "EUR", "BF": "XOF", "BG": "BGN", "BA": "BAM", "BB": "BBD", "WF": "XPF", "BL": "EUR", "BM": "BMD", "BN": "BND", "BO": "BOB", "BH": "BHD", "BI": "BIF", "BJ": "XOF", "BT": "BTN", "JM": "JMD", "BV": "NOK", "BW": "BWP", "WS": "WST", "BQ": "USD", "BR": "BRL", "BS": "BSD", "JE": "GBP", "BY": "BYR", "BZ": "BZD", "RU": "RUB", "RW": "RWF", "RS": "RSD", "TL": "USD", "RE": "EUR", "TM": "TMT", "TJ": "TJS", "RO": "RON", "TK": "NZD", "GW": "XOF", "GU": "USD", "GT": "GTQ", "GS": "GBP", "GR": "EUR", "GQ": "XAF", "GP": "EUR", "JP": "JPY", "GY": "GYD", "GG": "GBP", "GF": "EUR", "GE": "GEL", "GD": "XCD", "GB": "GBP", "GA": "XAF", "SV": "USD", "GN": "GNF", "GM": "GMD", "GL": "DKK", "GI": "GIP", "GH": "GHS", "OM": "OMR", "TN": "TND", "JO": "JOD", "HR": "HRK", "HT": "HTG", "HU": "HUF", "HK": "HKD", "HN": "HNL", "HM": "AUD", "VE": "VEF", "PR": "USD", "PS": "ILS", "PW": "USD", "PT": "EUR", "SJ": "NOK", "PY": "PYG", "IQ": "IQD", "PA": "PAB", "PF": "XPF", "PG": "PGK", "PE": "PEN", "PK": "PKR", "PH": "PHP", "PN": "NZD", "PL": "PLN", "PM": "EUR", "ZM": "ZMK", "EH": "MAD", "EE": "EUR", "EG": "EGP", "ZA": "ZAR", "EC": "USD", "IT": "EUR", "VN": "VND", "SB": "SBD", "ET": "ETB", "SO": "SOS", "ZW": "ZWL", "SA": "SAR", "ES": "EUR", "ER": "ERN", "ME": "EUR", "MD": "MDL", "MG": "MGA", "MF": "EUR", "MA": "MAD", "MC": "EUR", "UZ": "UZS", "MM": "MMK", "ML": "XOF", "MO": "MOP", "MN": "MNT", "MH": "USD", "MK": "MKD", "MU": "MUR", "MT": "EUR", "MW": "MWK", "MV": "MVR", "MQ": "EUR", "MP": "USD", "MS": "XCD", "MR": "MRO", "IM": "GBP", "UG": "UGX", "TZ": "TZS", "MY": "MYR", "MX": "MXN", "IL": "ILS", "FR": "EUR", "IO": "USD", "SH": "SHP", "FI": "EUR", "FJ": "FJD", "FK": "FKP", "FM": "USD", "FO": "DKK", "NI": "NIO", "NL": "EUR", "NO": "NOK", "NA": "NAD", "VU": "VUV", "NC": "XPF", "NE": "XOF", "NF": "AUD", "NG": "NGN", "NZ": "NZD", "NP": "NPR", "NR": "AUD", "NU": "NZD", "CK": "NZD", "XK": "EUR", "CI": "XOF", "CH": "CHF", "CO": "COP", "CN": "CNY", "CM": "XAF", "CL": "CLP", "CC": "AUD", "CA": "CAD", "CG": "XAF", "CF": "XAF", "CD": "CDF", "CZ": "CZK", "CY": "EUR", "CX": "AUD", "CR": "CRC", "CW": "ANG", "CV": "CVE", "CU": "CUP", "SZ": "SZL", "SY": "SYP", "SX": "ANG", "KG": "KGS", "KE": "KES", "SS": "SSP", "SR": "SRD", "KI": "AUD", "KH": "KHR", "KN": "XCD", "KM": "KMF", "ST": "STD", "SK": "EUR", "KR": "KRW", "SI": "EUR", "KP": "KPW", "KW": "KWD", "SN": "XOF", "SM": "EUR", "SL": "SLL", "SC": "SCR", "KZ": "KZT", "KY": "KYD", "SG": "SGD", "SE": "SEK", "SD": "SDG", "DO": "DOP", "DM": "XCD", "DJ": "DJF", "DK": "DKK", "VG": "USD", "DE": "EUR", "YE": "YER", "DZ": "DZD", "US": "USD", "UY": "UYU", "YT": "EUR", "UM": "USD", "LB": "LBP", "LC": "XCD", "LA": "LAK", "TV": "AUD", "TW": "TWD", "TT": "TTD", "TR": "TRY", "LK": "LKR", "LI": "CHF", "LV": "EUR", "TO": "TOP", "LT": "LTL", "LU": "EUR", "LR": "LRD", "LS": "LSL", "TH": "THB", "TF": "EUR", "TG": "XOF", "TD": "XAF", "TC": "USD", "LY": "LYD", "VA": "EUR", "VC": "XCD", "AE": "AED", "AD": "EUR", "AG": "XCD", "AF": "AFN", "AI": "XCD", "VI": "USD", "IS": "ISK", "IR": "IRR", "AM": "AMD", "AL": "ALL", "AO": "AOA", "AQ": "", "AS": "USD", "AR": "ARS", "AU": "AUD", "AT": "EUR", "AW": "AWG", "IN": "INR", "AX": "EUR", "AZ": "AZN", "IE": "EUR", "ID": "IDR", "UA": "UAH", "QA": "QAR", "MZ": "MZN"};
$.getJSON('//freegeoip.app/json/', function(location) {
if(location.country_code){
var mycurrency = currmap[location.country_code];
if(mycurrency){
$("#currency_form select").val(mycurrency);
$("#currency_form select").change();
}
}
});
});
})(jQuery);
});
$('#currency_form select').on('change', function(e) {
$('#currency_form').submit();
console.log('cur change: ', $(this).val());
});

我想您应该通过传递一个将false返回给.submit():的函数来防止页面的重新加载

$('#currency_form').submit(function(){
return false;
});

如前所述,您正在加倍使用onload机制。此外,您的currmap变量不是有效对象。对象需要键/值对,所以这是错误的。我把它做成了一个数组,因为你在下面引用了方括号符号。要测试给定值是否存在于数组中,请使用select0,它将返回布尔值。然后location.country_code实际上是美国的美元,而不是美元,所以我让选择菜单的值是美元,选项显示是美元。最后,您预先选择select选项的方式不正确。您想要引用元素,找到具有所需值的选项(返回索引(,然后设置attr('selected', true)

我评论掉了submit((,因为不清楚它的作用。一旦你解决了这个问题,我就可以完成这个答案,但除此之外,这应该会给你一个工作的开始如果//freegeoip.app/json/选择菜单检查/提交位于可重复使用的头文件或脚本文件中,则它将在每次加载页面时运行,并导致无限的重新加载循环。

$(document).ready(function() {
var currmap = ["US", "GBP"];
$.getJSON('//freegeoip.app/json/', function(location) {
if (location.country_code && currmap.includes(location.country_code)) {
$("#currency_form select").find("option[value='" + location.country_code + "']").attr("selected", true);
//$('#currency_form').submit();
}
});
});
$('#currency_form select').on('change', function() {
//$('#currency_form').submit();
console.log('cur change: ', $(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='currency_form'>
<select name='currency'>
<option>Choose a currency</option>
<option value="US">USD</option>
<option value="GBP">GBP</option>
</select>
</form>

最新更新