CODEWITHSUNDEEP
jqueryhtmlasp.net-mvc
abcd
abcd

Reputation: 109

Append another dropdown using jquery

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'>

Upvotes: 2

Views: 2232

Answers (3)

Akshita
Akshita

Reputation: 867

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

Upvotes: 1

Satpal
Satpal

Reputation: 133403

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"})

Upvotes: 2

Airan
Airan

Reputation: 477

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

Upvotes: 0

Related Questions