利用jquery實現select下拉框級聯效果

NO IMAGE

    所謂級聯效果,即頁面上存在具有包含關係的多組下拉框。當邏輯上的父級下拉框某個選項被選中(即selected),其包含的列表內容作為子級下拉框中的選項(option)供使用者選擇。例如:當使用者選擇所在區域時,城市下拉框選擇“北京”,對應的區縣下拉框中內容動態生成為為“海淀,朝陽,西城……”。一旦城市固定,使用者僅能選擇該城市下的對應區縣。現將jquery下的實現進行分享。

  1. 首先是頁面中兩個select標籤html程式碼,本例中使用的框架為freemaker框架,其中科室屬於醫院(病人屬於科室):

<div class="row cl">
	<label class="form-label col-3">醫院:</label>
	<div class="formControls col-5">
	<span class="select-box">
            <select class="select" id="selecthos"  name="department.hosID" onchange="hosChange()">
                <#if department??>
            		<#list hospitals as item>
            			<#if department.hosID==item.hosID>
            				<option value="${item.hosID}" selected>${item.hosName!}</option>
            			<#else>
            				<option value="${item.hosID}">${item.hosName!}</option>
            			</#if>
            		</#list>
		        <#else>		        	
		        	<#list hospitals as item>
            			<option value="${item.hosID}">${item.hosName!}</option>
            		</#list>		        	
	            </#if>
            </select>  
	</span>
	</div>
	<div class="col-4"></div>
</div>

<div class="row cl">
	<label class="form-label col-3">科室:</label>
	<div class="formControls col-5">
		<span class="select-box">
            <select class="select" id="selectdepart" name="patient.departID">
            </select>  
		</span>
	</div>
	<div class="col-4"></div>
</div>

2.js中hosChange函式實現:

function hosChange(){
	var hosID=$("#selecthos").val();
	Common.AjaxPost('${base}/test/patient/getDeparts?resultType=json', {"hosID":hosID}, undefined,function(data){
		$("#selectdepart").empty();
		for(var depart in data){
			$("#selectdepart").append("<option value='" data[depart].departID "'>" data[depart].departName "</option>");
		}
	},function(errMsg,errCode){
		Common.Alert(errMsg);
	});
}

主要思想是通過ajax獲得指定醫院ID下的所有科室,前端迴圈append到select標籤下。