单击下拉菜单时如何动态添加输入类型

时间:2016-08-10 19:10:11

标签: javascript jquery html css

这就是我想要做的事情:当dropdown itemclicked时,我想在其中添加一个div的新input并根据其命名点击的项目。我是一个完整的新手javascript。有人可以给我一些关于如何做到这一点的想法吗?

这是一张示例图片。当我点击item中的dropdown menu时,它会在其中添加另一个div类型input。喜欢专业考试。 enter image description here

这是我的代码。

<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"> 
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Criteria for grading</h4>
            </div>

            <div class="modal-body edit-content">
                <form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
                    <div class="dropdown">

                        <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"> Add Criteria <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Assignment</a></li>
                            <li><a href="#">Attendance</a></li>
                            <li><a href="#">Laboratory</a></li>
                            <li><a href="#">Activity</a></li>
                            <li><a href="#">Recitation</a></li>
                        </ul>
                    </div>
                    <br>

                    <div class="well">
                        <label for="majore">Major Exam</label>
                        <div class="input-group">
                            <input type="text" class="form-control majore"/>
                            <span class="input-group-addon">
                                <i class="fa fa-percent"></i>
                            </span>
                        </div>
                    </div>

                    <div class="well">
                        <label for="majore">Quizzes</label>

2 个答案:

答案 0 :(得分:0)

你的问题是标记为jQuery,所以我会使用它。

$(".dropdown-menu li").on("click", function(){
    var name = $(this).find("a").text();
    var newDiv = $(".well").first().clone();
    $(newDiv).find("label").text(name);
    newDiv.insertAfter(".well").last();
});

我认为您想要添加点击到新表单的下拉列表的名称,但您没有在您的问题中包含该名称。

答案 1 :(得分:0)

我不明白问题。我复制/粘贴了这个代码表格手册for bootstrap ...

@hasSection('name')
   @yield('name')
@endif
form {
  padding: .5em 1em;
}