0

我已经克隆了 select2 框，现在我想将克隆的对象与字符串连接起来，然后将其附加到目标字段。html是

<select data-placeholder="Select a billable item" name="nvoice_billable_ITEMID" id="invoice_billable_ITEMID" class="invoice_billable_ITEMID">
    <option value=""></option>
    <option value="35089">Initial</option>
    <option value="35088">Standard</option>
</select>

我使用代码来初始化选择 js 代码。

 var select_billable;
$(document).ready(function() {
    select_billable = $('.invoice_billable_ITEMID').clone();
    $(".nvoice_billable_ITEMID").select2({
        allowClear: true
    });});

在函数调用 add_fields 上，我创建了克隆对象，并在将其与字符串连接后将其附加到目标元素。克隆对象创建得很好，但是在附加字符串之后，字符串显示[object Object]在 sting 中的克隆对象的位置。如何将对象与字符串连接起来以使选择框可见？

//on call add the field for item
function add_fields(item_type){
    if(item_type == "Billable"){
        //   create the clone of select2 box
        var newBillableSelect = select_billable.clone();
        //function for concate the select2 box with string and append it
        appendRow(newBillableSelect);
        //initilizing the new select2 box
        newBillableSelect.select2();   
    }else if(item_type == "Product"){
        var newProductSelect = select_product.clone();
        appendRow(newProductSelect);
        newProductSelect.select2();  
    }
}
function appendRow(selectBox){
    var tr = '<tr class="fields_group" id="fields_group_ITEMID">'+
        '<td>'+ selectBox.html() +'</td>'+
        '<td>$<input type="text" style="width: 60px" size="30" name="unit_price[]" id="unit_price"></td>'+
        '<td><input type="text" style="width: 45px" size="30" name="quantity[]" id="quantity"></td>'+
        '<td><input type="hidden" name="tax_id" id="tax_id"><label class="tax_name">N/A</label><input type="hidden" name="tax_rate[]" id="tax_rate"></td>'+
        '<td>$<input type="text" value="0.00" size="10" readonly="readonly" name="net_price" id="net_price" class="read_only_text right_align_text" style="background-color: #fff;border:none;width: 100px;box-shadow:none "></td>'+
        '<td><input type="hidden" value="false" name="net_price[]" id="net_price"><a tabindex="-1" onclick="remove_invoice_item_fields(this); return false;" href="#" class="link_red link_small">remove</a></td>'+
        '</tr>';
    $('#items_tbody').append(tr);
}
4

1 回答 1

4

好的，你越来越近了。该.html()方法将返回一个html字符串，除了它将返回元素的内部html（即元素的内容/子元素）。为了获取元素本身的 html，您可以将您的选择包装在一个 div 中并将该 div 与您的 jQuery 选择器匹配，或者您可以使用一个临时元素来执行此操作，例如：

'<td>'+ $('<div>').append(selectBox).html() +'</td>'
于 2013-05-22T14:41:23.033 回答