级联下拉列表笔记

下拉框里的选项从数据库中动态获取，实现客户的证件类型随着客户类型改变而改变（个人，机构）：

页面效果：

jsp:

<label class="col-xs-1 control-label no-padding-right" for="form-field-6">客户类型：</label>
<div class="col-xs-3">
<span style="white-space:pre">	</span><sf:select path="cust_type"  id="cust_type"  class="form-control"  <span style="color:#ff0000;">οnchange="javascript:findCertType(this.value);"</span>>
<span style="white-space:pre">	</span><sf:option value="">请选择客户类型</sf:option>
<span style="white-space:pre">	</span><sf:options items="${cust_type_list}" itemLabel="type_content"   itemValue="type_value" />
</sf:select> 
</div>
<label class="col-xs-1 control-label no-padding-right" for="form-field-6">证件类型：</label>
<div class="col-xs-3">
<span style="white-space:pre">	</span><select id="certificate_type"  name="certificate_type">
	<span style="white-space:pre">	</span><option value=''>请先选择证件类型</option>
<span style="white-space:pre">	</span></select>
</div>

javascript:

//级联证件下拉框
		findCertType = function (cust_type){
			$.ajax({
				type:"GET",
				url:"${ctx}/cust/custInfo/addCertificate",
				data:{type_value:cust_type},
				contentType:"application/json",
				dataType:"json",
				success:function(certTypeList){
					var op = "<option value=''>请选择证件类型</option>";
					$("#certificate_type").children().remove();
			   		for(var i=0;i<certTypeList.length;i++){
			   			op += "<option value='"+certTypeList[i]['type_value']+"'>"+certTypeList[i]['type_content']+"</option>";
			   			
			   		}
			   		$("#certificate_type").append(op);
				},
				error:function(err){
					alert('获取证件类型失败');
				}
			});
		}

url对应的控制器里准备要显示的list数据

select里onchange事件触发ajax异步获取二级下拉框数据。