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

Question

 <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个呀？

Answer 1

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