JS动态添加下拉框跟文本域

 我来答
ic...0@33sn.cc
2017-04-23
知道答主
回答量:43
采纳率:0%
帮助的人:9.8万
展开全部

// 动态添加DOM元素,需要对DOM进行操作,不太清楚你对JQ了解如何,JQ会比较简单些;
//html代码

<html>
    <body>
        <button onclick="addRow()">添加</button>&nbsp;
        <button onclick="deleteRow()">删除</button>
        <div id="domOperate">
            <!-- dom操作放在该DIV中进行 -->
        </div>
    </body>
</html>




  • //js代码,要先引入jquery.js


<script type="text/javascript" src="" ></script>//这里引入jquery插件
<script type="text/javascrpt">
        //设置DOM操作父级元素
    var $target = $('#domOperate');
    //设置需要添加元素的模版
    var $addRow = $('<div class="row"><select><option value="1">下拉框</option></select><input type="text" name="inputDom" /></div>');
    //添加方法
    var addRow = function(){
        //对目标区域添加一行
        $target.append($addRow);
    }
    //移除方法,此处移除最后一个添加的
    var deleteRow = function(){
        if($target.find('.row').length > 0){//判断是否还有添加的元素
            $target.find('.row:last-child').remove();//找到最后一个删除
        }else{
            alert('已经没有可以删除的了');//此处也可以禁用按钮
        }
    }
</script>

好程序员
2017-04-23 · HTML5前端培训/大数据培训/Java
好程序员
好程序员是IT高端课程培训基地,从平凡到卓越,为梦想而拼搏。
向TA提问
展开全部
<div id="tt"></div>
<input type="button" value="添加select" onClick="createSelect()" />
<script>
function createSelect(){

document.getElementById("tt").innerHTML = "<select name=sel1><option value=1>1</option><option value=2>2</option></select>";
}
</script>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式