Append another dropdown using jquery

Question

I'm trying to append a dropdown. What I'm trying to do is to simply add another dropdown with the help of a button. the dropdown should contain same items in it as the existing dropdown. so below is my code.

This is the jquery script for condition where user can't create more than 10 dropdown box.

$("#addButton").click(function() {
    if (counter > 10) {
        alert("Only 10 dropdowns allowed");
        return false;
    }
    var newDDBoxDiv = $(document.createElement('div'))
        .attr("id", +counter);
    newDDBoxDiv.after().html('<label>dropdown #' + counter + ' : </label>' +
        '<select type="text" name="dropdown' + counter +
        '" id="dropdown' + counter + '" value="" >');

    newDDoxDiv.appendTo("#mb");
    counter++;
});

$("#removeButton").click(function() {
    if (counter == 1) {
        alert("No more dropdown to remove");
        return false;
    }
    counter--;
    $("#tid" + counter).remove();
});

and below is my cshtml

  <div class="editor-field" id="mb">
@Html.DropDownListFor(model => model.MC, ViewBag.lCountry as SelectList, "--select--", new{@id="tid"})

Above code doesn't work. if anyone has any suggestion on how to accomplish it, please share.

edit: buttons are below

  <input type='button' value='Add' id='addButton'>
  <input type='button' value='Remove' id='removeButton'>

Where is add and remove button? When you call drop-down its select tag not input — Satpal
– Satpal, Commented Jun 1, 2015 at 6:50
ah, i see. so i changed the input to select. but still. it shown an empty dropdown whenever i add new dropdown. i would like to add similar dropdown as i already have. — abcd
– abcd, Commented Jun 1, 2015 at 7:10

Satpal · Accepted Answer · 2015-06-01 07:51:12Z

2

Use

//Create a div
var newDDBoxDiv = $('<div />',
{
    "id": "tid0" + (++counter)
});

//Append label
newDDBoxDiv.append('<label>dropdown #' + counter + ' : </label>');

//Clone select
var select = $("#tid").clone(true);

//Updated id
select.prop("id", "dropdown" + counter);

//Append cloned select to new div
newDDBoxDiv.append(select);

//Append to div
newDDoxDiv.appendTo("#mb");

Note: Update ID of your select to tid0

@Html.DropDownListFor(model => model.MC, ViewBag.lCountry as SelectList, "--select--", new{@id="tid0"})

edited Jun 1, 2015 at 7:51

answered Jun 1, 2015 at 7:16

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chau Than Over a year ago

In his code, he created a text box, not a drop down list. But I think this is his problem.

Satpal Over a year ago

@ChauThan, Read his comment ah, i see. so i changed the input to select. but still. it shown an empty dropdown whenever i add new dropdown.

Chau Than Over a year ago

Ok, this is the best solution for him.

Chau Than Over a year ago

Btw, please edit "id" : ++counter. I think it will not work in event remove.

Satpal Over a year ago

@ChauThan, OP is using counter to keep track of no of elements.

|

Akshita · Accepted Answer · 2015-06-02 02:07:19Z

1

if i correcly understand your question you should use clone as

<select id="template">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<div id="test">
</div>
 <input type='button' value='Add' id='addButton'>
 <input type='button' value='Remove' id='removeButton'>
<script>
$(document).ready(function(){
$("#addButton").click(function(){
var elements=$("select[id!='template']");
var newElement=$("#template").clone(true);
var count=elements.length;
if(count>8)
{
    alert('no more dropdowns');
}
else
{
    newElement.attr('id',count);//rename new element so that it refers to     distinguished object instead of cloned object
    $("#test").append(newElement);
}


});
});
</script>

obviously you have your DropDownList object in place of template object

edited Jun 2, 2015 at 2:07

answered Jun 1, 2015 at 9:06

Akshita

8778 silver badges15 bronze badges

1 Comment

abcd Over a year ago

Yes, thank you. this is what i was looking for. at least this is the closest. thanks so much. =)

Airan · Accepted Answer · 2015-06-01 07:30:56Z

Try something like this...'

 var counter = 0;

 $('#addButton').click(function () {
     if (counter >= 10) {
         alert("Only 10 dropdowns allowed");
     } else {
         counter++;
         $(document.body).append('<div id="' + counter + '">' +
             '<label>dropdown #' + counter + ' : </label>' +
             '<select name="dropdown' + counter +
             '" id="dropdown' + counter + '">' +
         // Add your options here...
         '</select></div>');
     }
 });

 $('#removeButton').click(function () {
     if (counter <= 0) {
         alert("No dropdowns to remove");
     } else {
         $(document.body).find('div#' + counter).eq(0).remove();
         counter--;
     }
 });

Fiddle

Collectives™ on Stack Overflow

Append another dropdown using jquery

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related