jquery 多重下拉選單
工作上有接觸到多重選單的東西，所以自己也嚐試寫寫看。

下拉選單有很多方式，以下是不使用ajax，而是一次載入的方式去執行多重下拉選單，唯一優點大概就是反覆使用時，不用再傳送數值(ajax)。

首先，建好必要的select下拉選單。

<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>

再替第一個select寫上change事件。

$(function(){
	//第一個select新增change事件(數值變化時執行)
	$('#petKind').change(function(){
		//取得數值(暫稱kindV)
		var kindV = $(this).val();
		//如果不是空值而且第2個select是隱藏的話，第2個select顯示
		if(kindV!='' && $('#petKind2').hasClass('hidden')){
			$('#petKind2').removeClass('hidden');
		//如果是空值而且第2個select不是隱藏的話，第2個select隱藏
		}else if(kindV=='' && !$('#petKind2').hasClass('hidden')){
			$('#petKind2').addClass('hidden');
		}
		//將第2個select的所有option搬至隱藏的第3個select裡面後方
		$('#petKind2 option').appendTo($('#petKind2Hidden'));
		//將第3個select裡所有類別為pk加上kindV變數的option搬至第2個select裡面前方
		$('#petKind2Hidden option.pk'+kindV).prependTo($('#petKind2'));
		//將第2個select裡所有的第一個option設定為選擇狀態
		$('#petKind2Hidden option.pk'+kindV+':first').attr('selected','selected');
	});
});

主要是利用隱藏select來暫放沒有使用的項目，來達成類似多重下拉選單的功能。

多重下拉選單範例

本範例各瀏覽器支援狀態: