jquery - 如何将动态下拉列表附加为原始 html？

Question

我必须动态创建 2 个 dropdownlist 并将它们附加到我的表格中该表由 17 列组成，前两个 td 为 dropdownlist

这是我的 atm 代码:​​

$(document).on('click', 'input[type="button"].addRowReceiving', function () {
            //get current row count
       $size = $('table#receivingDetail > tbody > tr').size();

       $visible = $('table#receivingDetail > tbody > tr:visible').size();


       if ($visible <= 4) {
           $contactTable = $('table#receivingDetail tbody');

           var item = $('<select name="itemsAssoc['+ $size +'].F_ItemNo/>');
           var location = $('<select name="itemsAssoc[' + $size + '].F_LocationID/>');


           $.getJSON('@Url.Action("GetItemsAndWarehouse")', {}, function (e) {

                    $.each(e.warehouses, function (index, val) {
                        $('<option />', { value: val.F_ID, text: val.F_LOCATION }).appendTo(location);
                    });

                    $.each(e.items, function (index, val) {
                        $('<option />', { value: val.F_ID, text: val.F_ItemNo }).appendTo(item);
                    });


                });

                var stringApp = '<tr><td>'+  + '</td><td>' + ?? + '</td></tr>'         // how to add?

                $contactTable.append(stringApp);
         } else {
                alert('Limit reached');
        }


 });

由于我稍后必须添加 15 个 tds，所以我以某种方式希望像这样添加它们，这样我将拥有更多控件(因为我需要指定名称)

var stringApp = '<tr><td>'+  + '</td><td>' + ?? + '</td></tr>'         // how to add?
$contactTable.append(stringApp);

但是如果我放置项目或位置，我会得到[Object object]，

我应该如何正确附加em？

Answer 1

试试这个:

 var stringApp = '<tr><td>'+ $('<div>').append(item).html() + '</td><td>' + $('<div>').append(location).html() + '</td></tr>';

这将创建一个动态元素 <div>将innerHTML 作为项目/位置的HTML 内容。 html() 函数将跳过<div>并且只获取其内容作为字符串。 html() 将返回给定元素的内部 html，不包括父元素标签。所以<div>在这里将充当父级，html() 将返回其内部部分，即 <select> 。如果我不使用<div>那么它只会返回 <select> 的内部部分即<option>仅此而已。

我还建议使用简单的 JQuery :

$(document).on('click', 'input[type="button"].addRowReceiving', function () {
    $size = $('table#receivingDetail > tbody > tr').size();
    $visible = $('table#receivingDetail > tbody > tr:visible').size();
    if ($visible <= 4) {
        $contactTable = $('table#receivingDetail tbody');
        var item = $('<select name="itemsAssoc['+ $size +'].F_ItemNo/>');
        var location = $('<select name="itemsAssoc[' + $size + '].F_LocationID/>');
        $.getJSON('@Url.Action("GetItemsAndWarehouse")', {}, function (e) {
            $.each(e.warehouses, function (index, val) {
                location.append('<option value="'+val.F_ID+'">'+val.F_LOCATION+'</option>');
            });
            $.each(e.items, function (index, val) {
                item.append('<option value="'+val.F_ID+'">'+val.F_ItemNo+'</option>');
            });
        });
        var stringApp = '<tr><td>'+ $('<div>').append(item).html() + '</td><td>' + $('<div>').append(location).html() + '</td></tr>';
        $contactTable.append(stringApp);
    } else {
        alert('Limit reached');
    }
 });