jQuery AJAX动态加载XML城市选择框

全国城市的下拉选择表单，多表单类项目都得用到。用jQuery配合AJAX来从XML 文件里动态加载数据，写法清爽，兼容性也挺稳，适合老项目或者对 XML 有存量数据的场景。

核心就是用$.ajax()去拉cities.xml文件，再用$(xml).find('city')把城市节点取出来，一个个加到里。响应也快，结构清晰，用户体验提升不少。

适合那种城市多、数据变动少的系统，比如收货地址、省市联动啥的。想偷懒就直接套，效果还不错。写法也不复杂：

$.ajax({
  url: 'cities.xml',
  type: 'GET',
  dataType: 'xml',
  success: function(xml) {
    var $select = $('#citySelect');
    $(xml).find('city').each(function() {
      var $city = $(this);
      var cityId = $city.attr('id');
      var cityName = $city.text();
      $select.append('<option value="' + cityId + '">' + cityName + '</option>');
    });
  },
  error: function() {
    alert('无法加载城市数据，检查 XML 文件路径是否正确。');
  }
});

如果你用的是旧系统、或者对 XML 格式比较熟，蛮推荐试试看。如果你更习惯用 JSON，也可以换下dataType，思路是一样的。

下载地址

用户评论

更多下载

下载地址

立即下载

用户评论