我尝试在javascript中使用克隆功能，但问题是在克隆表单后，所有功能都丢失了。 我还使用clone.value（“”）来清除以前形式的值，但它仍然没有按照我的预期工作。以下是完整代码https://jsfiddle.net/meredithlou/b07berha/
的链接 <script>
app.controller("usercontroller", function($scope){
$scope.countryList = [
"Java", "JavaScript","C++"];
//break
$scope.complete = function(string){
$scope.hidethis = false;
var output = [];
//push the course number into list
angular.forEach($scope.countryList, function(country){
if(country.toLowerCase().indexOf(string.toLowerCase()) >= 0)
{
output.push(country);
}
});
//filter function
$scope.filterCountry = output;
}
$scope.fillTextbox = function(string){
$scope.country = string;
$scope.hidethis = true;
}
});
//Shows different menu options when certain category is selected
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
//if else statement when certain category is selected
if(s1.value == "QR"){
var optionArray = ["|","first|first Unit of Instruction","secondPass|Second Pass","lecture|Lecture","others|Others"];
} else if(s1.value == "VE"){
var optionArray = ["|","video|Video import","videoColor|Video Coloring","videoRemake|Video Remake","others|Others"];
} else if(s1.value == "AO"){
var optionArray = ["|","course|Course Charter","budget|Course Budget","others|Others"];
}
//parse the array
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
<!--This part is for project name, subtopic, subtask and hours -->
<div class="selectCategory" id="selct" style="width:900px;" >
<form class="form-main" novalidate (ngSubmit)="onSubmitForm()" method="post" enctype="multipart/form-data" >
<h4>Choose one of the categories</h4>
<input type="radio" ng-model="myCat" value="Course">Course
<input type="radio" ng-model="myCat" value="Project">Administration Overhead
<div ng-switch="myCat">
<!-- break -->
<!-- when course radio button is selected -->
<div ng-switch-when="Course">
<h5>Select the Course Number</h5>
<div ng-controller="usercontroller">
<input type="text" name="country" id="country" ng-model="country" ng-keyup="complete(country)" class="form-control" />
<ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
<li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-click="fillTextbox(countrydata)">{{countrydata}}</li>
</ul>
</div>
<!-- break -->
<!-- main categories -->
<h6><strong>Select one of the categories</strong></h6>
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="QR">Quality Review</option>
<option value="VE">Video Editing</option>
<option value="AO">Admin Overhead</option>
</select>
<br/>
<h6>Select one of the task</h6>
<select id="slct2" name="slct2"></select>
<!-- break -->
<br/>
<br/>
<!--input for hours-->
<h7>Please input hours for this task: </h7>
<br/>
<input class="form-control" id="inputdefault" type="text">
</div>
<!-- break -->
<!-- break -->
<!-- break -->
<!-- break -->
<!-- break -->
<!-- break -->
<!-- same menu option like above without course number -->
<!-- when the project is selected -->
<div ng-switch-when="Project">
<h6><strong>Select one of the categories</strong></h6>
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<!-- list of options -->
<option value=""></option>
<option value="QR">Quality Review</option>
<option value="VE">Video Editing</option>
<option value="AO">Admin Overhead</option>
</select>
<br/>
<!-- subcategory -->
<h6>Select one of the task</h6>
<select id="slct2" name="slct2"></select>
<br/>
<br/>
<h7>Please input hours for this task: </h7>
<br/>
<input class="form-control" id="inputdefault" type="text">
</div>
</div>
</form>
</div>
<!-- add and remove buttons -->
<button type="button" id="btn" class="btn btn-success add-more-btn">Add More Forms</button>
<button type="button" id="rmbtn" class="btn btn-success">Remove this Form</button>
<!-- end of the form -->
</body>
答案 0 :(得分：0)
您的示例不是完整的代码，因此很难为您提供完整的解决方案但是请记住，元素ID应该是唯一的，因此即使您动态创建了带有复制ID的第二个表单，您的代码仍然会没有按预期运行，因为它只会抓取它找到的具有指定ID的第一个元素。你需要重构你的html和js来通过id以外的方式检索/操作元素（想想类）。