0

I want to add table multiple time (based on drop down list selected value) into div tag. I used below code and it is displaying only one table row. Can any one guide me to implement this scenario?

<select id="ddl">
                    <option value="1">1 </option>
                     <option value="2">2 </option>
                      <option value="3">3</option>
                       <option value="4">4 </option>
                       <option value="5">5 </option>
             </select>

    <table id="dis">

    <tr>
           <td> 
            <select id="fieldname1">
                    <option value="1"> 1</option>
                     <option value="2">2 </option>
                      <option value="S3">3</option>
                       <option value="S4">4 </option>
                       <option value="AA">5 </option>
             </select>
           </td> 
       <td> 
            <select id="fieldname2">
                    <option value="1">1 </option>
                     <option value="2">2 </option>
                      <option value="3">3</option>
                       <option value="4">4 </option>
                       <option value="A">A </option>
             </select>
           </td> 
        </tr>
   </table>

<div id="dynamicgroup"> </div>

<script>
     $("#ddl").change(function () {

         var count = parseInt($(this).val());


for (var i = 0; i <count; i++) {


             $('#dynamicgroup').append($('#dis'));


         }
user3793029
  • 135
  • 3
  • 13

1 Answers1

1

Try this : You are trying to append dis table everytime and this will replace the same table in div, instead you can put its clonned copy. use .clone() and then append it to div

$("#ddl").change(function () {
    var count = parseInt($(this).val());
    for (var i = 0; i <count; i++) {
        $('#dynamicgroup').append($('#dis').clone().removeAttr("id"));
     }
});
Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57
  • 1
    It also might be a good idea to remove the ID from the cloned element so it doesn't appear more than once. `$('#dynamicgroup').append($('#dis').clone().removeAttr("id"));` - demo here: http://jsfiddle.net/o6p96mpf/ – Chris Barr Jan 08 '15 at 12:53
  • Thank you so much. It worked well.Is it possible to loop MVC based dropdownlist using jquery? – user3793029 Jan 08 '15 at 12:57
  • @user3793029 what do you mean by "MVC based dropdown"? A dropdown is a dropdown. You can select it with jquery by it's ID, a CSS class, or even other ways. – Chris Barr Jan 08 '15 at 13:16