I have following html code. It is generated by Razor engine. This is dynamic. I mean the no of elements in drop down may vary according to user. I need to replicate this drop down exactly below the same drop down with new id and new name. I have looked here, here,here and here. Following is my html. I have added ments in code for more clarification.

<!-- the entire section with id and name template needs to be copied -->
<div id="template" name="template" class="form-group unique">
  <label class="control-label col-md-2" for="Course">Course</label>
  <!-- the drop down below has id and name as Course[0].Title
I need to increment index inside []  -->
  <div class="col-md-10">
    <select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title">
      <option value="1">Statistics</option>
      <option value="2">Trigonometry</option>
      <option value="3">Biology</option>
      <option value="4">Neurology</option>
      <option value="5">Applied</option>
      <option value="6">Theoretical</option>
    </select>
  </div>
</div>

I have following html code. It is generated by Razor engine. This is dynamic. I mean the no of elements in drop down may vary according to user. I need to replicate this drop down exactly below the same drop down with new id and new name. I have looked here, here,here and here. Following is my html. I have added ments in code for more clarification.

<!-- the entire section with id and name template needs to be copied -->
<div id="template" name="template" class="form-group unique">
  <label class="control-label col-md-2" for="Course">Course</label>
  <!-- the drop down below has id and name as Course[0].Title
I need to increment index inside []  -->
  <div class="col-md-10">
    <select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title">
      <option value="1">Statistics</option>
      <option value="2">Trigonometry</option>
      <option value="3">Biology</option>
      <option value="4">Neurology</option>
      <option value="5">Applied</option>
      <option value="6">Theoretical</option>
    </select>
  </div>
</div>

Now I came up with following jQuery code. It copies only once and then stops working. I checked in console and there is no error. The javascript code with ments for clarification is as follows.

< script src = "~/Scripts/jquery-1.10.2.min.js" > < /script>
<script type="text/javascript
">
    
    $(document).ready(function () {
	//copy the section with class name unique
        var clone = $('.unique').clone();
	//Copy again as i am modifying the id,name of div with unique class
        var clone2 = $('.unique').clone();  
	//initialize the index with 1, the item with 0 index is already in webpage.
        var i = 1;
	//Change name of drop down who has class drop and assign new name
        $(".unique ").find(".drop ").attr("
name ", "
Course[0].Title ");
	//Change id of drop down who has class drop and assign new id
        $(".unique ").find(".drop ").attr("
id ", "
Course[0].Title ");
	//on click of plus button, i add clone of drop down with parent div section and with new id and name
        $("#
plus ").click(function () {
	//Add after the element which has class unique
            $('.unique').after(clone2);
	//Find name inside unique and update
            $(".unique ").find(".drop ").attr("
name ", "
Course[" + i + "].Title ");
	//Find id inside unique and update
            $(".unique ").find(".drop ").attr("
id ", "
Course[" + i + "].Title ");
	//Increment the index
            i = i + 1;
        });

    });
</script>

Whats wrong in the script?

• javascript
• jquery
• html
• css
• razor

Share Improve this question Follow edited Apr 8, 2016 at 12:11 benomatis 5,65377 gold badges3939 silver badges6060 bronze badges asked Apr 8, 2016 at 11:53 Gaurav ChauhanGaurav Chauhan 1,35744 gold badges1818 silver badges4444 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Is that what you wants ? There was some typo errors when setting attr("name") and attr("id")

Also here's my code to get the insert works as much as you wants :

I clone the element in the click() event to make it works.

$(document).ready(function () {
//initialize the index with 1, the item with 0 index is already in webpage.
    var i = 1;
    $("#plus").on('click', function () {
//Add after the element which has class unique
        var clone2 = $('#template').clone();  
        $("#template").after(clone2);
        $(clone2).attr('id',"template"+i);
        $(clone2).attr('name',"template"+i);
//Find name inside unique and update
        $(clone2).find(".drop ").attr("name", "Course[" + i + "].Title ");
//Find id inside unique and update
        $(clone2).find(".drop ").attr("id", "Course[" + i + "].Title ");
//Increment the index

        i++;
    });
});

See this fiddle

You could post data via js but elements which has been added by js dynamically would not be returned to mvc action!

try using for loop sir

First, setup your select inside a div for instance:

<div class="select-inside">
   <select>
     <option value="1">Statistics</option>
     <option value="2">Trigonometry</option>
     <option value="3">Biology</option>
    <option value="4">Neurology</option>
    <option value="5">Applied</option>
    <option value="6">Theoretical</option>
   </select>
</div>

In your script, store the select element to a var using jquery selector. Then, use a for loop to clone the select element and append to the document.

var select = $(".select-inside select");

for(var i = 0; i < numberOfYourChoice; i++) {
     var clone = select;
     clone.attr("id", "id[" + i + "]");
     clone.attr("name", "name[" + i + "]");
    document.append(clone);
}

< script src = "~/Scripts/jquery-1.10.2.min.js" > < /script>
<script type="text/javascript
">
    
    $(document).ready(function () {
	//copy the section with class name unique
        var clone = $('.unique').clone();
	//Copy again as i am modifying the id,name of div with unique class
        var clone2 = $('.unique').clone();  
	//initialize the index with 1, the item with 0 index is already in webpage.
        var i = 1;
	//Change name of drop down who has class drop and assign new name
        $(".unique ").find(".drop ").attr("
name ", "
Course[0].Title ");
	//Change id of drop down who has class drop and assign new id
        $(".unique ").find(".drop ").attr("
id ", "
Course[0].Title ");
	//on click of plus button, i add clone of drop down with parent div section and with new id and name
        $("#
plus ").click(function () {
	//Add after the element which has class unique
            $('.unique').after(clone2);
	//Find name inside unique and update
            $(".unique ").find(".drop ").attr("
name ", "
Course[" + i + "].Title ");
	//Find id inside unique and update
            $(".unique ").find(".drop ").attr("
id ", "
Course[" + i + "].Title ");
	//Increment the index
            i = i + 1;
        });

    });
</script>