多重下拉選單
本文是利用隱藏的下拉選單，製作出動態載入的效果。
由於是一次性的的載入，最大缺點也是是因為全部載入，所以原始碼上所有分類都會看得一清二楚。
html程式碼
<select name="petKind" id="petKind">
<option value="">-請選擇-</option>
<option value="1">狗</option>
<option value="2">貓</option>
</select>
<select name="petKind2" class="hidden" id="petKind2">
<option value="" class="pk">無</option>
</select>
<select name="petKind2Hidden" class="hidden" id="petKind2Hidden">
<option value="10" class="pk1">臘腸狗</option>
<option value="11" class="pk1">貴賓狗</option>
<option value="12" class="pk1">土狗</option>
<option value="13" class="pk2">波斯貓</option>
</select>
css樣式
select.hidden { display:none; }
首先建立好html架構，這邊應該不難看出，有個select(#petKind2Hidden)是隱藏並寫入所有種類細項。
接著我們開始替第一個select(#petKind)寫上change事件。
jquery程式碼
$(function(){
//第一個下拉選單(#petKind)新增change事件。
$('#petKind').change(function(){
var kindV = $(this).val();
if(kindV!='' && $('#petKind2').hasClass('hidden')){
//不是空值時並且第2個下拉選單(#petKind2)是隱藏的話，顯示第2個下拉選單。
$('#petKind2').removeClass('hidden');
}else if(kindV=='' && !$('#petKind2').hasClass('hidden')){
//空值時並且第2個下拉選單(#petKind2)不是隱藏的話，隱藏第2個下拉選單。
$('#petKind2').addClass('hidden');
}
//將第2個下拉選單(#petKind2)初始化。(搬至隱藏的下拉選單)。
$('#petKind2 option').appendTo($('#petKind2Hidden'));
//再依第1個下拉選單(#petKind)選擇的數值，搬至第2個下拉選單(#petKind2)最前方。
$('#petKind2Hidden option.pk'+kindV).prependTo($('#petKind2'));
//將搬移的第一筆option設定為選擇狀態
$('#petKind2Hidden option.pk'+kindV+':first').attr('selected','selected');
});
});
比較重要的是，搬移前的初始化，和搬移後第一筆資料設定為擇選狀態。
範例
各瀏覽器支援狀態：
Create at 2012-05-07 01:02:06, Revise at 2012-05-07 01:02:06
Back to Jquery
文章標籤
暫無資料