Question

我有以下HTML代码。它由Razor引擎生成。这是动态的。我的意思是下拉中的元素数量可能因用户而异。我需要使用新的id和新名称将此下拉列表完全复制到相同的下拉列表下方。我看过here，here，here和here。以下是我的HTML。我在代码中添加了注释以获得更多说明。

＆＃13;

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

＆＃13;

现在我提出了以下jQuery代码。它只复制一次然后停止工作。我检查了控制台，没有错误。带有注释以澄清的javascript代码如下。

＆＃13;

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

＆＃13;

剧本中有什么问题？

Answer 1

这就是你想要的吗？设置attr("name")和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++;
    });
});

See this fiddle

Answer 2

您可以通过js发布数据，但是js动态添加的元素不会返回到mvc动作！

Answer 3

尝试使用for loop先生

首先，例如在div中设置你的选择：

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

在脚本中，使用jquery选择器将select元素存储到var中。然后，使用for循环克隆select元素并附加到文档。

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

Answer 4

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

如何在div元素中更新html元素的id和名称？

4 个答案: