jQuery 建立 AJAX 下拉框表單的例子

最近在開發一個小東西的時候出現這麼一個需求，根據 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() 方法擷取到資料之後，使用 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'  : '日本',
 'Germany': '德國',
 'Britain': '英國',
 'France' : '法國',
 'Korea'  : '韓國'
}

可以使用 PHP 的 json_encode() 函數，把 PHP 資料變成我們需要的 JSON 對象資料：

echo json_encode( array(
 'USA'     => '美國',
 'China'   => '中國',
 'Japan'   => '日本',
 'Germany' => '德國',
 'Britain' => '英國',
 'France'  => '法國',
 'Korea'   => '韓國'
) );