jQuery AJAX下拉框表單的實現例子

AJAX下拉框表單是在表單中綁定了改變事件了，當A改變時B的列表根據A條件進行查詢返回並顯示資料了，具體例子如下。

最近在開發一個小東西的時候出現這麼一個需求，根據 AJAX 請求的資料產生下拉框表單。
 
這個需求經常會出現，比如全球範圍內地址的選擇，全球所有國家的省份和城市是一堆不小的資料，而且表單還不一定會被使用。這時可以考慮先載入一個空表單，在使用者點擊的時候再用 AJAX 把資料載入進來；或者先載入所有國家的列表，然後根據使用者選擇的國家再載入對應的省份和城市資料。
 
再比如一些必須使用 AJAX 載入下拉框表單的地方。像 CDK 兌換，需要使用者填寫 CDK 之後再根據 CDK 適用的範圍產生下拉框表單。
 
實現這個功能是比較簡單的，但是我們要說的是如何更加高效的實現這個功能。
 
HTML 表單
 
在 AJAX 擷取並產生資料之前，首先需要一個空的或者存在內容的 HTML 下拉框表單用來填充資料：
 

<select id="dropdown">
  <option value="">請選擇...</option>
 </select>
 
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.111cn.net)) 方法擷取到資料之後，使用 build_dropdown() 方法填充了表單資料，這裡我們就來建立這個方法：
 

//填充表單
 var build_dropdown = function( data, element, defaultText ){
  element.empty().append( '<option value="">' + defaultText + '</option>' );
  if( data ){
   $.each( data, function( key, value ){
    element.append( '<option value="' + key + '">' + value + '</option>' );
   } );
  }
 }
 
這個方法用三個參數，分別是表單資料（JSON 對象）、需要被填充資料的表單和預設空選項的文本。
 
到這裡就可以完成一個 AJAX 擷取資料並產生下拉框表單的過程了。
 
資料格式
 
AJAX 擷取的表單資料為 JSON 對象，格式類似於：
 

{
  'USA'    : '美國',
 'China'  : '中國',
 'Japan'  : 'www.111cn.net',
 'Germany': '德國',
 'Britain': '英國',
 'France' : '法國',
 'Korea'  : '韓國'
 }
 
可以使用 PHP 的 json_encode() 函數，把 PHP 資料變成我們需要的 JSON 對象資料：
 

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