javascript - js如何做到点“添加”下方的已选区域就会多出一个名字为已选区域的按钮？

问题描述

问 题

 <div  class="center">
           <label>服务区域</label>
           <div class="yixuanquyu">
           
           <select  class="middle_1" id="qu">
               <option value="-1">--请选择--</option>
               <c:if test="${!empty listArea }">
                <c:forEach items="${listArea}" var="list">
                <option value="${list.id }">${list.name }</option>
                </c:forEach>
            </c:if>
           </select>
        
        <select class="middle_1" id="jiedao">
               <option value="-1">--请选择--</option>
           </select>
           
           <input class="search" type="button" value="添加" >
           <span class="blank_1">可选1—5个</span>
           </div>
   </div>
   <div  class="center">
           <label>已选区域</label>
           <div class="yixuanquyu">
           <input class="yixuanquyu_1"type="button" value="中关村" >
           
           </div>
   </div>

1.js如何做到点添加下方的已选区域就会多出一个名字为已选区域的按钮？
2.input传到后台的值可以跟显示值不一样吗？
3.如何控制最多选择5个呀？

解决方案

• 点击添加的时候可以获取当前服务区域的两个值，
• 然后根据这两个值，动态的创建 DOM 添加到已选区域后面的容器(通常是个 DIV 或者 UL)中
• 在创建显示出来的标签(通常是Span或DIV等)的同时，可以创建 <input type="hidden" ...> 来记录值，这个值可以传递给后台，可以与显示的不同
• 第一步事件中，可以先检查已选区域是否已经有5个值了，如果有就弹出提示，不再继续

这篇关于javascript - js如何做到点“添加”下方的已选区域就会多出一个名字为已选区域的按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！