• 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") }
  • 相关阅读:
    第十一周上机练习
    JAVA第十周上机练习
    JAVA第九周上机练习
    JAVA第八周作业
    JAVA第八周上机作业
    JAVA第七周作业
    Java第七周上机练习
    Java第六周作业
    JAVA第六周上机练习
    34-指针与二维数组
  • 原文地址:https://www.cnblogs.com/rose-1121/p/10728641.html
Copyright © 2020-2023  润新知