自动货币选择器无限刷新页面

Question

我有一个货币选择器功能，可以自动检测用户的位置，并在加载时和#currency_form 更改时更新网站的货币和select 位置。

问题是当我运行代码时，页面会无限刷新。如果用户从#currency_form 更改选择器值，如何更改我的代码以便在加载时更新货币和选择器？

提交表单会刷新页面并更新货币/位置。这需要在mycurrency 与位置匹配的加载以及select 更改时发生，因为它将更改网站上显示的货币。

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());
});

Answer 1

我猜你应该通过将返回false 的函数传递给.submit() 来防止重新加载页面：

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

Answer 2

如前所述，您将onload 机制加倍。此外，您的 currmap 变量不是有效对象。对象需要键/值对，所以这是错误的。我把它做成了一个数组，因为你在下面用方括号表示法来引用它。要测试给定值是否存在于数组中，请使用array.includes(value)，它将返回一个布尔值。然后location.country_code 实际上是美国的美国，而不是美元，所以我让选择菜单以美国为价值，以美元为选项显示。最后，您预先选择选择选项的方式不正确。您要引用元素，找到具有所需值的选项（返回索引），然后设置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>