<div id="selectBox"> </div> <div class="make"> <span class="xinzeng">新增选项</span> <span class="add">+</span><br /> <div class="hidebox none"> <input type="text" class="choose" id="choose" placeholder="添加选项" value=""/> <div class="sure">确定</div> </div
</div>
css
.make{ margin-bottom: 20px; } .xinzeng{ font-size:18px; margin-right:10px; } .add{ font-size: 24px; font-weight: bold; } #selectBox, { font-size: 16px; } .choose{ border-radius:5px; outline: none; width: 100%; } .sure{ width: 100px; height: 30px; font-size: 18px; color: #FFFFFF; text-align: center; line-height: 30px; background: #5C9DFF; margin: 20px 0; }
上面的代码 是我需要让input里面的内容在点击确定后,让input里面的内容放到selectBox盒子里面
下面是一段js
$(".add").click(function(){ $(".hidebox").css("display","block") }) var content = $("#choose").val() var arr=[]; var selectArr = ['A','B','C','D','E','F']; if($("#choose").val() != ""){
arr.push(content) var str =""; for (var i =0; i<arr.length;i++){ if(i<=selectArr.length){ str+=' <p> <span>${selectBox[i]}</span> <span>${arr[i]}</span> </p> ' }else{ alert("选项太多了") } } $("#choose").val(); $("hidebox").css("display","none") $("#selectBox").html(str); }else{ alert("请输入内容"); $("hidebox").css("display","none") }