jquery - 使用 jquery 和框的单击事件自动填充国家/地区名称列表框

Question

我的表单有一个列表框，要求输入用户所在的国家/地区，但我只想通过 AJAX 调用填充该列表框(如果该框尚未显示用户所在的国家/地区)。最初，列表框仅包含一个国家/地区 - 该国家/地区是从服务器上的 ip 到国家/地区查找返回的国家/地区。

列表框的默认操作似乎发生在我的事件操作之前。我希望首先执行我的操作，以便当用户单击列表框时，该框会在框打开之前预先填充从服务器拉出的国家/地区。

感谢您的任何建议。

$().ready(function() {
  $('select#selCountry').one('click', function() {
    var selCountry = $('select#selCountry');
    var selected = $(selCountry).val();
    selCountry.html('<option value="">Loading...</option>');
    $.getJSON('/AjaxHelpers/CountryList', function(data) {
      if (data.length) {
        var options = '';
        for (var i = 0; i < data.length; i++) {
          var key = data[i].Key;
          var val = data[i].Value;
          options += '<option value="' + key + '"';
          if (key == selected) {
            options += ' selected="selected"';
          }
          options += '>' + val + '</option>';
        }
        selCountry.html(options);
      }
      else {
        selCountry.html('<option value="">Failed.</option>');
      }
    });
  });
});

HTML:

<div>
  <select id="selCountry" name="CountryCode"><option value="GB">United Kingdom</option>

Answer 1

您将不会因为选择点击事件而感到跨浏览器的乐趣。只有change事件是大家都支持的，所以你需要重新考虑。

一种选择是使用显示 IP 国家/地区的标签，如果用户想要更改它，他们单击标签旁边的按钮，然后创建并填充选择并替换标签。