我有以下 html 代码。它是由 Razor 引擎生成的。这是动态的。我的意思是下拉列表中的元素数量可能会根据用户的不同而有所不同。我需要使用新 ID 和新名称将此下拉列表复制到同一下拉列表的正下方。我看过here https://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id, here https://stackoverflow.com/questions/2977041/changing-various-ids-after-cloning-in-jquery,here https://stackoverflow.com/questions/11985156/clone-div-and-change-id and here https://forum.jquery.com/topic/cloning-a-div-and-change-its-html-content-and-append-to-another-div。以下是我的 html。我在代码中添加了注释以获得更多说明。
<!-- 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>
现在我想出了以下 jQuery 代码。它只复制一次，然后就停止工作。我检查了控制台，没有错误。带有澄清注释的 JavaScript 代码如下。
< 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>
剧本有什么问题吗？
这就是你想要的吗？设置时出现一些拼写错误attr("name") and attr("id")
另外，这是我的代码，可以让插入按照您的意愿工作：
我克隆了元素click()事件使其发挥作用。
$(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++;
});
});
看看这个小提琴 https://jsfiddle.net/c7ff6nr6/19/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
