克隆表行与下拉不起作用

Question

我想从模板克隆一行，与选定的值。我也想复制后克隆模板行。

$("CloneButton").click(function() { 

var clonedRow = $('#rowtemplate').clone(); 
      clonedRow.html($(clonedRow).html().replace(/#/g, index)); 
      clonedRow.find('.project').text(project); 
      clonedRow.find('.billingcodeCssId').val(timeCodeID); 
      clonedRow.find('.billingcodeCss').text(timeCode); 
      $('#Maintable').append(clonedRow.find('tr')); 
}); 

当我尝试clone the table row JS Fiddle时，选择器没有选取选择器。 选择器有什么问题，并且如何用选择的值下拉克隆该行？

Answer 1

尝试在你的代码需要此 会有很多变化..

1. 你写$("CloneButton").click(function() { - 它错过了# ID选择 - 让你按一下按钮，将不会触发。您需要编写$("#CloneButton").click(function() {
2. 您需要在克隆和追加之前为这两个下拉列表设置selectd属性。你可以设置selected属性使用.attr("selected", true)

下面的代码工作正常。 检查工作代码段

$("#CloneButton").click(function() { 
 

 
var drp1Value = $('#rowtemplate tr').find('select').eq(0).val(); 
 
$("option[value=" + drp1Value + "]", $('#rowtemplate tr').find('select').eq(0)) 
 
    .attr("selected", true).siblings() 
 
    .removeAttr("selected"); 
 
    
 

 
var drp2Value = $('#rowtemplate tr').find('select').eq(1).val(); 
 

 
$("option[value=" + drp2Value + "]", $('#rowtemplate tr').find('select').eq(1)) 
 
    .attr("selected", true).siblings() 
 
    .removeAttr("selected"); 
 

 

 

 
var clonedRow = $('#rowtemplate tr').clone(); 
 
$('#Maintable').append(clonedRow);   
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<h4 >Main Table</h4> 
 

 
<table id="Maintable" > 
 
<th>Client</th><th>Heading</th><th>Heading</th><th>Total</th><th>Delete?</th> 
 
<tr> 
 
<td> 
 
<span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Modeling</option> 
 
<option value="1">Ventosanzap</option> 
 
<option value="2">Modeling</option> 
 
<option value="3">Xilinx ISE</option> 
 
</select> 
 
</span> 
 
               
 
</td> 
 
      <td> 
 
      <input type="hidden" name="Records.Index" value="0"> 
 
      <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList"> 
 
      <option value="">Budget-070</option> 
 
      <option selected="selected" value="5">Budget-070</option> 
 
      <option value="6">Budget-784</option> 
 
      <option value="7">Cost Center-027</option> 
 
      </select></span>            
 
      </td> 
 
      <td> 
 
      <input name="Records[0].TimeRecords[0].ID" type="hidden" value=""> 
 
      <input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value=""> 
 
      </td>            
 
      
 
      <td class="rowtotal">10.00</td> 
 
              
 

 
      <td> 
 
      <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false"> 
 
      </td> 
 
</tr> 
 
<tr> 
 
     <td><span class="project"> 
 
     <select class="form-control projectcodeid" id="Records" name="Records[1].SelectedProjectFromList"><option value="">Xilinx ISE</option> 
 
<option value="1">Ventosanzap</option> 
 
<option value="2">Modeling</option> 
 
<option value="3">Xilinx ISE</option> 
 

 
</select></span> 
 
               
 
    </td> 
 
    <td> 
 
     <input type="hidden" name="Records.Index" value="1"> 
 
     <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_1__SelectedBillingCodesFromList" name="Records[1].SelectedBillingCodesFromList"><option value="">Bill-727           </option> 
 
<option value="1">TIME CODE A          </option> 
 
<option selected="selected" value="2">Bill-727           </option> 
 
<option value="3">Bill-561           </option> 
 
<option value="4">Bill-281           </option> 
 
</select></span>            
 
     </td> 
 
     <td> 
 
      <input name="Records[1].TimeRecords[0].ID" type="hidden" value=""> 
 
      <input class="meters" name="Records[1].TimeRecords[0].Meters" type="text" value=""> 
 
     </td> 
 
              
 
              <!-- added row totals rowtotalmeters--> 
 
              <td class="rowtotal">             
 
               0.00 
 
              </td>            
 

 
              <td> 
 
               <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false"> 
 
              </td> 
 
             </tr> 
 
             
 
             </table> 
 
             
 
      <!--*********** End Main Table-->   
 
<hr />        
 
<h4>Row template</h4> 
 
    
 
<button type="button" id="CloneButton">Add Clone Row to table!</button> 
 
    
 
<table id="rowtemplate"> 
 
<tr> 
 
<td> 
 
    <span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Default</option> 
 
    <option value="0">Null</option> 
 
<option value="1">Ventosanzap</option> 
 
<option value="2">Modeling</option> 
 
<option value="3">Xilinx ISE</option> 
 
</select></span> 
 
               
 
</td> 
 
      <td> 
 
      <input type="hidden" name="Records.Index" value="0"> 
 
      <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList"> 
 
      <option value="">Default</option> 
 
      <option value="0">Null</option> 
 
      <option value="">Budget-070</option> 
 
      <option value="5">Budget-070</option> 
 
      <option value="6">Budget-784</option> 
 
      <option value="7">Cost Center-027</option> 
 
      </select></span>            
 
      </td> 
 
      <td> 
 
      <input name="Records[0].TimeRecords[0].ID" type="hidden" value=""> 
 
      <input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value=""> 
 
      </td>            
 
      
 
      <td class="rowtotal">0.00</td> 
 
              
 

 
      <td> 
 
      <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false"> 
 
      </td> 
 
</tr> 
 

 
             
 
    </table>

请检查代码片段