2013-05-21 1 views
0

У меня есть select2 box cloned, и теперь я хочу объединить клонированный объект со строкой, а затем добавить его в целевое поле. HTML, являетсяКак конкретизировать объект клонирования jquery для строки

<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] вместо клонированного объекта с укусом. как я могу конкатенировать объект со строкой, чтобы окно выбора было видимым?

//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); 
} 
+0

Ты что у вас была часть 'html()', когда вы тестировали? Я не могу придумать сценарий, в котором этот метод вернет объект. Кроме того, что такое '$ ('. Invoice_billable_ITEMID')' селекторное совпадение? Если он соответствует элементу * select *, тогда вызов 'html()' на нем вернет вложенные * опции * элементы, которые не будут действительными html внутри * td *. – JayPea

+0

Я редактировал сообщение $ ('. Invoice_billable_ITEMID') selecter для select2. – Naveedumar

+0

Я редактировал сообщение для селектора $ ('. Invoice_billable_ITEMID'). это для блока select2. а также вы правы, у него нет части html(), но я просто поставил его, чтобы попытаться получить объект html, но он только печатает значения параметров в поле выбора. – Naveedumar

ответ

3

Хорошо, вы приближаетесь. Метод .html() вернет строку html, за исключением того, что она вернет внутренний html элемента (то есть содержимое/дочерние элементы). Для того, чтобы получить HTML для самого элемента, вы можете либо обернуть ваш выбор в DIV и соответствовать тому DIV с селектором JQuery, или вы могли бы сделать это с временным элементом, например:

'<td>'+ $('<div>').append(selectBox).html() +'</td>' 
+0

да его работа после упаковки – Naveedumar