JavaScript克隆表單中沒有增加id的表單

Question

我試過在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> 

Answer 1

你舉的例子是不完整的代碼，以便它使得它很難給你一個完整的解決方案，但請記住，元素ID意味着是唯一的，這樣，即使你動態地創建了帶有複製ID的第二個表單，因此您的代碼仍然無法按預期工作，因爲它只會抓取具有指定ID的第一個元素，而且該元素找到了要操作的元素。你將需要重構你的html和js，以通過除id以外的方式（思考類）來檢索/操作元素。