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

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

    所謂級聯效果,即頁面上存在具有包含關係的多組下拉框。當邏輯上的父級下拉框某個選項被選中(即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標籤下。

相關文章

程式語言 最新文章