jQuery AJAX下拉框表单的实现例子

AJAX下拉框表单是在表单中绑定了改变事件了，当A改变时B的列表根据A条件进行查询返回并显示数据了，具体例子如下。

最近在开发一个小东西的时候出现这么一个需求，根据 AJAX 请求的数据生成下拉框表单。
 
这个需求经常会出现，比如全球范围内地址的选择，全球所有国家的省份和城市是一堆不小的数据，而且表单还不一定会被使用。这时可以考虑先加载一个空表单，在用户点击的时候再用 AJAX 把数据加载进来；或者先加载所有国家的列表，然后根据用户选择的国家再加载对应的省份和城市数据。
 
再比如一些必须使用 AJAX 加载下拉框表单的地方。像 CDK 兑换，需要用户填写 CDK 之后再根据 CDK 适用的范围生成下拉框表单。
 
实现这个功能是比较简单的，但是我们要说的是如何更加高效的实现这个功能。
 
HTML 表单
 
在 AJAX 获取并生成数据之前，首先需要一个空的或者存在内容的 HTML 下拉框表单用来填充数据：
 

<select id="dropdown">
  请选择...
 
 
AJAX 获取数据
 
接下来我们可以开始使用 AJAX 获取数据了，在使用 jQuery 的情况下，AJAX 获取数据非常简单方便。
 
获取数据的时机可以是在用户点击表单的时候、用户设置其它表单的内容的时候或者其它时候。
 

$.ajax( {
  type: 'GET',
  url: AJAXurl,
  dataType: 'json',
  success: function( data ){
   build_dropdown( data, $( '#dropdown' ), '请选择...' );//填充表单
  }
 } );
 
使用 AJAX 请求 AJAXurl 的地址之后将返回一个 JSON 对象，接下来我们需要解析这些数据，把他填充到下拉框表单里，这里使用了自定义方法 build_dropdown()。
 
填充表单
 
在上边用 ajax((www.111com.net)) 方法获取到数据之后，使用 build_dropdown() 方法填充了表单数据，这里我们就来创建这个方法：
 

//填充表单
 var build_dropdown = function( data, element, defaultText ){
  element.empty().append( '' + defaultText + '' );
  if( data ){
   $.each( data, function( key, value ){
    element.append( '' + value + '' );
   } );
  }
 }
 
这个方法用三个参数，分别是表单数据（JSON 对象）、需要被填充数据的表单和默认空选项的文本。
 
到这里就可以完成一个 AJAX 获取数据并生成下拉框表单的过程了。
 
数据格式
 
AJAX 获取的表单数据为 JSON 对象，格式类似于：
 

{
  'USA'    : '美国',
 'China'  : '中国',
 'Japan'  : 'www.111com.net',
 'Germany': '德国',
 'Britain': '英国',
 'France' : '法国',
 'Korea'  : '韩国'
 }
 
可以使用 PHP 的 json_encode() 函数，把 PHP 数据变成我们需要的 JSON 对象数据：
 

echo json_encode( array(
  'USA'     => '美国',
  'China'   => '中国',
  'Japan'   => 'www.111com.net',
  'Germany' => '德国',
  'Britain' => '英国',
  'France'  => '法国',
  'Korea'   => '韩国'
 ) );