jQuery 让input里面的内容可以布局到页面上

<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")
}