Question

JS Fiddle of nonworking code： https://jsfiddle.net/8fo28ccL/

使用下面的代码，只要用户单击按钮添加一行，我就会动态添加到我的html正文中。顶行工作正常（它是一个复选框），但我不能让选择输入行工作....

var addNewRow = function(id){
html = '<tr id="tr_'+i+'">';
html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html +='<span class="add_icon hide" id="add_icon_'+i+'"> <i class="fa fa-plus-circle"></i></span>';
html +='</td>';

html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]"  id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';

html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
html += '<input type="hidden" id="stock_'+i+'"/>';
html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
html += '</td>';
html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select value="" name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
html += '</tr>';

if( typeof id !== "undefined"){
    $('#tr_'+id).after(html);
}else{
    $('table').append(html);
}

编辑：抱歉，添加了旧版本的代码，并使用正确的TD元素进行了更新。选择框将出现在页面上，但如果您尝试选择值，则不会保存...

编辑2：Guys / Gals，问题不在于html是否出现在我的身体中（它是通过追加功能实现的，问题是在它添加之后。添加文本后，会出现一个复选框和一个表单选择字段。如果在表单选择中选择其他选项，并保存表单，则不保存该选项。

Answer 1

尝试在var之前添加html，在+=变量参考

时将=调整为html

var i = 0;
var html = '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select value="" name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
document.body.innerHTML = html

Answer 2

从你提供的那些东西我只能建议这些东西。你应该尝试一次。

var html = "";
html += "<td><input type='checkbox' name='data[InvoiceDetail][0][staged]' id='staged_1'" + i + " class='form-control autocomplete_txt' autocomplete='off'></td>";
html += "<td><select value='' name='data[InvoiceDetail][0][location]' id='location_1'" + i + "'class='form-control autocomplete_txt' autocomplete='off'>";
html += "<option value='Used'>Used</option>";
html += "<option value='RTS'>RTS</option>";
html += "<option value='LAJ'>LAJ</option>";
html += "</select></td>";
$(html).appendTo(WhereYouwanttoappend);

希望它可能适合你。

Answer 3

你的html没有初始化（可能）

var html = ''

查看此运行代码：http://codepen.io/anon/pen/zvOaqj

Answer 4

删除＆＃34;值＆＃34;选择元素的属性。

jquery和输入选择

4 个答案: