下拉框代碼

<fieldset style="margin-bottom:5px;">
<div class="form-group">
<label for="disabledSelect" class="col-sm-4 control-label">醫院名稱</label>
<div class="col-sm-8">
<select id="hospitalCode" class="form-control" name="hospitalCode" οnchange="handle();">
<c:forEach items="${institutionList }" var="institution">
<option value="${institution.medInstitutionCode }" <c:if test="${institution.medInstitutionCode == doctorSchedule.hospitalCode }">selected="selected"</c:if>>${institution.medInstitutionName }</option>
</c:forEach>
</select>
</div>
</div>
</fieldset>

<input type="hidden" name="scheduleId" value="${doctorSchedule.scheduleId }"/>
<input type="hidden" name="id" value="${doctorSchedule.id }"/>
<fieldset style="margin-bottom:5px;">
<div class="form-group">
<label for="disabledSelect" class="col-sm-4 control-label">科室名稱</label>
<div class="col-sm-8">
<select id="keshiCode" class="form-control" name="keshiCode" οnchange="keshi();">
<option value="${doctorSchedule.keshiCode }">${doctorSchedule.keshi }</option>
</select>
</div>
</div>
</fieldset>
<fieldset style="margin-bottom:5px;">
<div class="form-group">
<label for="disabledSelect" class="col-sm-4 control-label">醫生姓名</label>
<div class="col-sm-8">
<select id="doctorId" class="form-control" name="doctorId">
<option value="${doctorSchedule.doctorId }">${doctorSchedule.doctorName }</option>
</select>
</div>
</div>
</fieldset>

js代碼

<script type="text/javascript">
function handle(){
var hospitalCode = $("#hospitalCode").val();
//alert(aaa);
$.ajax({
type: "post",
url: "xxx.json",
data: {"hospitalCode":hospitalCode},
dataType: "json",
success: function(date){
//var dataObj = eval("("+data+")");
var dataObj = eval(date);
//alert(dataObj.data[0].keshiName);
var dataArr = dataObj.data;
var keshi = $("#keshiCode");
keshi.empty();
if(date==null){
keshi.append("<option value = '-1'>"+"科室為空"+"</option>");
}
if(dataArr!=null){
for(var i =0;i<dataArr.length;i++){
var item=dataArr[i];
keshi.append("<option value = '"+item.keshiCode+"'>"+item.keshiName+"</option>");
};
}
}
});
}

function keshi(){
var keshiCode = $("#keshiCode").val();
//alert(keshiCode);
$.ajax({
type: "post",
url: "xxx.json",
data: {"keshiCode":keshiCode},
dataType: "json",
success: function(date){
//var dataObj = eval("("+data+")");
var dataObj = eval(date);
//alert(dataObj.data[0].keshiName);
var dataArr = dataObj.data;
var doctor = $("#doctorId");
doctor.empty();
if(date==null){
doctor.append("<option value = '-1'>"+"醫生為空"+"</option>");
}
if(dataArr!=null){
for(var i =0;i<dataArr.length;i++){
var item=dataArr[i];
doctor.append("<option value = '"+item.doctorId+"'>"+item.userName+"</option>");
};
}
}
});
}
</script>

轉載于:https://www.cnblogs.com/luchangyou/p/5775643.html

總結

以上是生活随笔為你收集整理的ajax实现下拉列表联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。