问题描述
今天遇到个小问题,问题描述:选择挂号医生时,挂号费用随之改变。下拉框的值是通过EL赋值。如图:
解决方法:
1、利用ajax异步发送请求,但是这里两个值在一起返回的,没必要再重新做一次查询。
2、在js中再遍历一次,当它们id 相同时,给input 框赋值。
$("#paiBanDoctor").bind('change ',function(){ $.each(doctorList,function(key,item){ var doctorList = jQuery.parseJSON( partList); console.log("key"+key+",item:"+item.departNo); //返回结果为null时,转换成空字符串 $("#"+key).val(item||""); //input框赋值 ...... }) });
3、在原JSP页面中将这些值封装进hidden域,然后传给js文件,比较直接的一种做法,但在后期维护时候可能会引起歧义(例如过一段时间后看JSP页面时候不知道这些hidden是干嘛的了)
4、在JSP页面中先声明一个<script></script>,在其中将你要传递的EL表达式作为全局变量写入,然后再导入外部JS代码
<script type="text/javascript"> var arr = new Array(); var count = 1; <c:forEach items="${doctorList}" var="dto" > arr[count] = new Array(); arr[count][1] = "${dto.id}"; arr[count][2] = "${dto.registerFee}"; arr[count][3] = "${dto.doctorName}"; count++; </c:forEach> </script>
5、最后想到一种很简单的办法,具体做法,将需要的几个值拼接起来,通过select绑定change事件,将需要的值分割出来,赋值给input框。(推荐)
<select id="paiBanDoctor" class="js-example-placeholder-single js-states form-control">
<option value="">请选择</option>
<c:forEach items="${doctorList}" var="doctor">
<option value="${doctor.id}@@${doctor.doctorName}@@${doctor.registerFee}">${doctor.doctorName}</option>
</c:forEach>
</select>
$("#paiBanDoctor").bind('change ',function(){ var doctorInfo = $(this).val(); var doctorId=doctorInfo.split("@@")[0]; var registerFee=doctorInfo.split("@@")[3]; $("#registerFee").val(registerFee); });