复选框、下拉框实现多值回显

一、下拉框实现增加,保存在字段domain中以,号分割。并将值回现在jsp中选中展示

 

效果:

 

1)

<script type="text/javascript">

   $(function() {

      $('#userProjectRecommendedForm1').form({

                     url : '${ctxweb }/userinfo/attestation/userProjectRecommendedSave',

                     onSubmit : function() {

                        return $(this).form('validate');

                     },

                     success : function(data) {

                        var result = $.parseJSON(data);

                        var id = result.msg;

                        if (result.success == true) {

                           location.href = "${ctxweb}/userinfo/userProjectRecommendedFull/" + id;

                        }

                     }

                  });

     

       $(".add-field").click(function(e){

              e.preventDefault();

              var n=$(".add-type>li").length;

              var num=n+1;

              var li="<li>"+

                  " <select name='domain' id='domain'> "+

                  "  <option value=''>请选择</option> "+

                  <c:forEach items='${domains}' var='domain'>

" <option value='${domain.text}' <c:if test='${domain.text eq douser["+num+"]}'>selected</c:if>> ${domain.text} </option> "+

                  </c:forEach> 

                  " </select > "+

                  " </li>";

              $(".add-type").append(li);

          });

    $(".common").on("click","input",function(){

        if($(this).is(":checked")){

            $(this).parent().css("background","url('"+'${ctxStatic }'+"/images/checked_07.png') no-repeat left  center");

        }else{

            $(this).parent().css("background","url('"+'${ctxStatic}'+"/images/no-check_07.png') no-repeat left  center");

        }

    });

   });

   </script>

 

2)

<li>

                <label for="">领域</label>

                <div>

                    <p>(至少选择一项,可多选择)</p>

                    <ul class="add-type common clear">

                       <li>

                           <c:set value="${fn:split(userProjectRecommended.domain,',') }" var="douser" />

                            <c:choose>

                             <c:when test="${not empty douser }">

                                <c:forEach items="${douser }" var="duser" varStatus="i">

                                 <li>

                                <select name="domain" id="domain">

                                  <option value="">请选择</option>

                                  <c:forEach items="${domains}" var="domain">

                            <option value="${domain.text}" <c:if test="${domain.text eq duser}">selected</c:if>>

                            ${domain.text}

                            </option>

                           </c:forEach>

                               </select>

                             <c:if test="${i.index==0 }"><a href="#" class="add-field"><img src="${ctxStatic}/images/add_icon_07.png" alt="" /></a></c:if>

                                </li>

                               </c:forEach>

                             </c:when>

                             <c:otherwise>

                                <select name="domain" id="domain">

                                  <option value="">请选择</option>

                                  <c:forEach items="${domains}" var="domain">

                            <option value="${domain.text}">

                            ${domain.text}

                            </option>

                           </c:forEach>

                               </select>

                              <a href="#" class="add-field"><img src="${ctxStatic}/images/add_icon_07.png" alt="" /></a>

                            </c:otherwise>

                            </c:choose>

                       </li>

                    </ul>

                </div>

            </li>

 

3)

public class Dictionarytype  implements java.io.Serializable{

   private Long id;

   private String code;

   private String name;

   private Integer seq;

   private String description;

   private String pid;

}

 

public class Dictionary  implements java.io.Serializable{

   private Long id;

   private String code;

   private String text;

   private Long dictionarytypeId;

   private String dictionarytypeName;

   private Integer seq;

   private Integer state; // 状态 0启用 1停用

   private Integer isdefault; // 是否默认

}

后台代码:

Dictionarytype domain = dictionarytypeServiceI.getByCode("follow_domain"); // 关注领域

      List<Dictionary> domains = dictionaryService.findDicList(domain.getId());

      model.addAttribute("domains", domains);

 

二、复选框多选,以及值回显:

<li>

                <label for="">地域</label>

                <div>

                    <p>(至少选择一项,可多选择)</p>

                    <ul class="round-times common clear">

                        <c:set value="${fn:split(userProjectRecommended.territoryKey,',') }" var="ter" />

                         <c:forEach var="area" items="${areas}" varStatus="i">

                               <li

                                  <c:choose>

                            <c:when test="${fn:indexOf(userProjectRecommended.territoryKey, area.text)>=0}">

                                style="background: url('${ctxStatic}/images/checked_07.png') left center no-repeat;"

                            </c:when>

                            <c:otherwise>

                                style="background: url('${ctxStatic}/images/no-check_07.png') left center no-repeat;"

                            </c:otherwise>

                           </c:choose>

                               >

                                  <input type="checkbox" name="territoryKey" value="${area.text}"

                                  <c:if test="${fn:indexOf(userProjectRecommended.territoryKey, area.text)>=0}"> checked='checked'</c:if>

                                  />

                                   <label>${area.text} </label>    

                               </li>

                          </c:forEach>

                    </ul>

                </div>

</li>

 

后台代码:

Dictionarytype area = dictionarytypeServiceI.getByCode("territory_key"); // 地域

      List<Dictionary> areas = dictionaryService.findDicList(area.getId());

      model.addAttribute("areas", areas);

 

三、<textarea></ textarea>标签使用注意问题:

猜你喜欢

转载自blog.csdn.net/yangyi30/article/details/89917094