关于“前台根据后台值,操作字段、显示或select选中状态”的几种做法

需求分析
当修改单选按钮或者下拉框的值的时候,如何根据后端获取的数据显示在前端,且要显示单选框和下拉框的选中状态
第一种做法:使用JSTL标准标签库

①下拉框显示

 <select name="department" >
                            <c:choose>
                            <c:when test="${doctor.department.equals('内科')}">
                                <option value="内科"selected="selected">内科</option>
                                <option value="口腔科" >口腔科</option>
                                <option value="皮肤科">妇产科</option>
                                <option value="外科">外科</option>
                                <option value="精神科">精神科</option>
                                <option value="急诊科">急诊科</option>
                            </c:when>
                            <c:when test="${doctor.department.equals('口腔科')}">
                                <option value="内科">内科</option>
                                <option value="口腔科" selected="selected">口腔科</option>
                                <option value="皮肤科">妇产科</option>
                                <option value="外科">外科</option>
                                <option value="精神科">精神科</option>
                                <option value="急诊科">急诊科</option>
                            </c:when>
                            <c:when test="${doctor.department.equals('妇产科')}">
                                <option value="内科">内科</option>
                                <option value="口腔科" >口腔科</option>
                                <option value="皮肤科"selected="selected">妇产科</option>
                                <option value="外科">外科</option>
                                <option value="精神科">精神科</option>
                                <option value="急诊科">急诊科</option>
                            </c:when>
                            <c:when test="${doctor.department.equals('外科')}">
                                <option value="内科">内科</option>
                                <option value="口腔科" >口腔科</option>
                                <option value="皮肤科">妇产科</option>
                                <option value="外科"selected="selected">外科</option>
                                <option value="精神科">精神科</option>
                                <option value="急诊科">急诊科</option>
                            </c:when>
                            <c:when test="${doctor.department.equals('精神科')}">
                                <option value="内科">内科</option>
                                <option value="口腔科" >口腔科</option>
                                <option value="皮肤科">妇产科</option>
                                <option value="外科">外科</option>
                                <option value="精神科"selected="selected">精神科</option>
                                <option value="急诊科">急诊科</option>
                            </c:when>
                            <c:when test="${doctor.department.equals('急诊科')}">
                                <option value="内科">内科</option>
                                <option value="口腔科" >口腔科</option>
                                <option value="皮肤科">妇产科</option>
                                <option value="外科">外科</option>
                                <option value="精神科">精神科</option>
                                <option value="急诊科"selected="selected">急诊科</option>
                            </c:when>
                            </c:choose>
                        </select>

②单选按钮的显示

<c:if test="${doctor.sex == 0 }">
      <input type="radio" name="sex" class="layui-input" title="" value="0" checked>
      <input type="radio" name="sex" class="layui-input" title="" value="1" >
</c:if>
<c:if test="${doctor.sex == 1 }">
      <input type="radio" name="sex" class="layui-input" title="" value="0">
      <input type="radio" name="sex" class="layui-input" title="" value="1" checked>
</c:if>

③两个选项的下拉框

<select name="expert">
    <c:if test="${doctor.expert == 0}">
        <option value="0" selected>非专家</option>
        <option value="1">专家</option>
	</c:if>
	<c:if test="${doctor.expert == 1}">
         <option value="0" >非专家</option>
         <option value="1"selected>专家</option>
    </c:if>

原本这样显示之后就可以了,但是看着代码很多,可读性很差,就进行了优化,优化之后的代码如下:
①下拉框显示

<%--设置一个对比值--%>
<c:set var="dept" value="${doctor.department}" />
   <!-- for循环输出所有部门名称 -->
   <c:forEach items="${depart}" var="de">
   		<%--如果和对比值相等,则被选中--%>
        <c:if test="${de.department.equals(dept)}">
            <option value="${de.department}" selected="selected">${de.department}</option>
         </c:if>
        <%--如果和对比值不相符,则不会选中--%>
         <c:if test="${!de.department.equals(dept)}">
             <option value="${de.department}">${de.department}</option>
         </c:if>
   </c:forEach>

②单选按钮的显示

<input type="radio" name="sex" class="layui-input" title="男" 
	value="1" ${doctor.sex == 1 ?'checked': ''}>
<input type="radio" name="sex" class="layui-input" title="女" 
	value="0" ${doctor.sex == 0 ?'checked': ''}>

②单选按钮的显示

<select name="expert">
    <option value="0" ${doctor.expert == 0 ? 'selected' : ''}>非专家</option>
    <option value="1" ${doctor.expert == 1 ? 'selected' : ''}>专家</option>
</select>

到此,优化完成,喜欢的大佬请一键三联哦!!!biu!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值