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

2019-04-18 11:39:28 阅读：198 来源： 互联网

标签：jQuery selectBox 页面 choose var input font css size

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

标签：jQuery,selectBox,页面,choose,var,input,font,css,size
来源： https://www.cnblogs.com/rose-1121/p/10728641.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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