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 comments 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 comments 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?
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++;
});
});
你可以通过js发布数据,但是js动态添加的元素不会返回到mvc动作!
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.