How can i add or append more then one dropdown

Question

My task is to add previous form when i click on add button. enter image description here

When i click on Add button it will add all dropdown below each as shown in image.

And remove one line(means all 5 dropdown of one line).I am to do this functionality.

problem is:

how we can append or add one line each click on add button.

my coading is: jQuery:

$(document).ready(function () {
    $(".glyphicon").click(function () {
        $(this).parents('.form-group').remove();
    });
    $(".add").click(function () {
        $("form").parent(".form-group").add();
    });
});

$(document).ready(function () {
    $(".glyphicon").click(function () {
        $(this).parents('.form-group').remove();
    });
    $(".add").click(function () {
        $("form").parent(".form-group").add();
    });
});

Html:

<div class="form-group">        
            <div class="col-sm-12" >
              <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="week"><a href="#">Monday</a></li><li class="week"><a href="#">Tuesday</a></li>
                  <li class="week"><a href="#">Wednesday</a></li><li class="week"><a href="#">Thusday</a></li>
                  <li class="week"><a href="#">Friday</a></li><li class="week"><a href="#">Saturdayy</a></li>
                  <li class="week"><a href="#">Sunday</a></li>
                </ul>
             </div> 
             <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="week"><a href="#">Monday-saturaday</a></li>
                </ul>
             </div> 
             <label for="exampleInputEmail1"> : </label>
              <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" style="height: 10em;width:2em;  overflow: auto;">
                  <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li>
                  <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>                  
                  <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>                  
                  <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>                  
                </ul>
             </div>
              <label for="exampleInputEmail1"> to </label>
            <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li class="week"><a href="#">Monday-saturaday</a></li>
                </ul>
            </div> 
            <label for="exampleInputEmail1"> : </label>
            <div class="btn-group week">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" style="height: 10em;width:2em;  overflow: auto;">
                  <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li>
                  <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>                  
                  <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>                  
                  <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>                  
                </ul>
             </div>
                <span class="glyphicon glyphicon-remove"></span>
          </div>
       </div>

Please refer http://stackoverflow.com/a/19094268/1912257 – Anusha Dec 17 '13 at 11:23 — Anusha, Dec 17 '13 at 11:23

Mr.TK · Accepted Answer · 2014-01-03T13:37:14.030

1

Try using .clone() from jQuery lib and simply clone last element.

Clone manual here

EDIT: The answer to this problem is in comments bellow ( jQuery on() function)

edited Jan 03 '14 at 13:37

answered Dec 17 '13 at 11:25

Mr.TK

1,743
2
17
22

but I am not able to close by clicking on cross button – sonalgoyal Dec 17 '13 at 11:47
$("#remove").click(function () { $(".abcd:last").clone().remove(); }); – sonalgoyal Dec 17 '13 at 11:47
1

That's simple! But first: Attrib id should be unique on page (#remove) - use .remove instead and change the attrib from id="remove" to class="remove". And now to jQuery definition: Do something like this: `$('body').on('click', '.remove',function(){ //blablabla });` You just have to define it ONCE at the very beginning of scripts loading and every single element with class "remove" will do what you will want! Function on is available from jquery >= v1.7 I think :) – Mr.TK Dec 17 '13 at 22:37

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

thank you I did this:

coading is:

 $("#add").click(function(){   
    $(".abcd:last").clone().appendTo(".wrapper");  
});

Refered link:

Cloning whole form elements after clicking button

edited May 23 '17 at 10:32

Community

1
1

answered Dec 17 '13 at 11:30

sonalgoyal

359
1
6
19

How can i add or append more then one dropdown

2 Answers2