實作範例
HTML範例
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript" src="dynamicSelector.js"></script>
<select id="county" class="dynamicSelector"
title="{'url':'dynamicSelector.php?ac=getCounty'}">
<option value="N">彰化縣</option>
</select>
<select id="area" class="dynamicSelector"
title="{'url':'dynamicSelector.php?ac=getArea','parent':'#county','varname':'countyCode'}">
<option value="524">溪州鄉</option>
</select>
<select id="school" class="dynamicSelector"
title="{url:'dynamicSelector.php?ac=getSchool',parent:'#area',varname:'areaCode'}">
<option value="www.cges.chc.edu.tw">成功國民小學</option>
</select>
PHP範例
<?php
switch($_GET['ac']){
case 'getCounty':
$county = array(
'A' => '台北市',
'N' => '彰化縣'
);
echo json_encode($county);
break;
case 'getArea':
$area['A'] = array(
'103' =>'大同區',
'104' =>'中山區'
);
$area['N'] = array(
'523' => '埤頭鄉',
'524' => '溪州鄉'
);
echo json_encode($area[$_GET['countyCode']]);
break;
case 'getSchool':
$school['103'] = array(
'www.mlps.tp.edu.tw' =>'明倫國民小學',
'www.dlps.tp.edu.tw' =>'大龍國民小學',
'www.ylps.tp.edu.tw' =>'永樂國民小學'
);
$school['104'] = array(
'www.csps.tp.edu.tw' => '中山國民小學',
'www.tzes.tp.edu.tw' => '大直國民小學',
'www.yaes.tp.edu.tw' => '永安國民小學'
);
$school['523'] = array(
'www.shses.chc.edu.tw' => '合興國民小學' ,
'www.ches.chc.edu.tw' => '中和國民小學'
);
$school['524'] = array(
'www.cyps.chc.edu.tw' => '潮洋國民小學',
'www.cges.chc.edu.tw' => '成功國民小學'
);
echo json_encode($school[$_GET['areaCode']]);
break;
}
?>
dynamicSelector.js檔案內容
$(document).ready(function(){
//代替反斜線(避免HTML驗證器的警告)
var slash = '/';
//抓起需動態產生的選單
var dynamicSelector = $('select[class="dynamicSelector"]');
//針對每個動態選單預始化與事件設定
$.each(dynamicSelector,function(){
//目前執行的選單
var selector = $(this);
//取得設定檔(定義於title屬性中)
var config = eval('('+selector.attr('title')+')');
//如果有父層選單，取得父層的預設值
if(config.parent != null){
//父選單物件
var parentSeletor = $(config.parent);
//父選單目前的值
var parentValue = ($('option:selected',parentSeletor).attr('value'));
//初始Ajax的URL網址，並加上變數
iniUrl = config.url+'&'+config.varname+'='+parentValue;
//進行遠端讀取選項
$.getJSON(iniUrl,function(json){
//該選單的預設值
var defaultValue = ($('option:selected',selector).attr('value'));
//用來存放動態產生的選項
var opts = '';
$.each(json,function(value,option){
if(value == defaultValue){
opts += '<option value="'+value+'" selected="selected">'+option+'<'+slash+'option>';
} else {
opts += '<option value="'+value+'">'+option+'<'+slash+'option>';
}
});
//註冊事件，當父層異動時，重新抓取父層值後更新自身選項
parentSeletor.change(function(){
parentValue = $(this).val();
changeUrl = config.url+'&'+config.varname+'='+parentValue;
$.getJSON(changeUrl,function(json){
defaultValue = ($('option:selected',selector).attr('value'));
opts = '';
$.each(json,function(value,option){
if(value == defaultValue){
opts += '<option value="'+value+'" selected="selected">'+option+'<'+slash+'option>';
} else {
opts += '<option value="'+value+'">'+option+'<'+slash+'option>';
}
});
selector.html(opts);
$(selector).trigger('change');
});
});
//刷新選單內的選項
selector.html(opts);
});
} else {
$.getJSON(config.url,function(json){
//取得選單中預設的選項
var defaultValue = ($('option:selected',selector).attr('value'));
var opts = '';
$.each(json,function(value,option){
if(value == defaultValue){
opts += '<option value="'+value+'" selected="selected">'+option+'</option>';
} else {
opts += '<option value="'+value+'">'+option+'</option>';
}
});
selector.html(opts);
});
}
});
});