jquery 在表模式中追加时Select2不工作

wqnecbli  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(118)

我试图在modal中的每个表行中附加select2,但它不起作用,然后用值附加选项。但结果总是没有搜索的普通下拉列表。


的数据
我在代码中就是这样做




如何启用select2?我使用的是Bootstrap 5.0.2,选择2 4.1,jquery 3.3.1

swvgeqrz

swvgeqrz1#

我将select2的初始化移到了函数内部,在追加表行之后,而不是在页面加载时。

function WIForm(Wrong) {
    $('#AddWI').each(function () {
        
        RowID = RowID + 1;
        var markup = '';
        markup += "<tr id='tr" + RowID + "' class='RowID'>";
        markup += "<td style='text-align: center; width:20px vertical-align: middle;'> <span onclick='DeleteRow(this)'class='btn btn-sm btn-outline-danger' id='DelWI " + RowID + "'><i class='fas fa-trash'></i></span></td>";
        markup += "<td style='text-align: center; width:50px'>" + "<input type='text'  class='form-control' style='width:50px; height:30px; font-size:13px;' name ='WIGQTY' id ='WIGQTY" + RowID + "'>" + "</td>";
        markup += "<td style='text-align: center; width:50px'>" + "<input type='text' class='form-control' style='width:50px; height:30px; font-size:13px;' name ='WIREJQTY' id ='WIREJQTY" + RowID + "'>" + "</td>";
        markup += "<td style='text-align: center; width:50px'>" + "<input type='text'  class='form-control' style='width:50px; height:30px; font-size:13px;' name='WIWIPQTY' id ='WIWIPQTY" + RowID + "'>" + "</td>";
        markup += "<td style='text-align: left'>" + "<select type='text'  class='js-example-basic-multiple' style='text-align: left; width: 545px; height: 30px; font-size: 13px;' id ='ItemCode" + RowID + "'><option></option> </select>" + "</td>";
        markup += "</tr>"
        swal({
            title: "Loading...",
            text: "Please wait, this might take a while...",
            type: "info",
            position: "top",
            allowEscapeKey: false,
            allowOutsideClick: false,
            allowEnterKey: false,
            onOpen: () => {
                swal.showLoading()
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8", /*-----Fetching the method into VB/Markup/Code behind*/
                    url: "CustomerReturnInspectionChecklist(CRIC).aspx/CRICOnclick",
                    data: '{"DRDFNo" : "' + DRDFNo + '"}',
                    dataType: "JSON",
                    success: function (response) {
                        swal.close();
                        if (response.d.messagetype == "E") {
                            swal({
                                title: 'Error Encountered',
                                text: response.d.message,
                                type: 'error',
                                customClass: 'animated tada',
                                position: 'top'
                            });
                        } else if (response.d.messagetype == "R") {
                            swal({
                                title: 'Session Expired',
                                text: response.d.message,
                                type: 'warning',
                                customClass: 'animated tada',
                                position: 'top'
                            })
                        } else {
                            /*-----Catching the Thrown values from Database to method and from method to ajax*/
                            var xmlDoc = $.parseXML(response.d);
                            var xml = $(xmlDoc);
                            var list = xml.find("CRIC2");
                            var DR = xml.find("CRIC3");
                            $(DR).each(function () {
                                var sel = '';
                                sel = "<option>" + $(this).find("ItemCode").text() + "</option>";
                                $("#ItemCode" + RowID).append(sel);
                                swal.close();
                            });
                        }
                    },
                    error: function (result) {
                        swal(
                            'Error Encountered',
                            result.responseText,
                            'error'
                        )
                    }
                });
            }
        });
        $('#WrongItemQTY tbody').append(markup);
        $('#ItemCode' + RowID).select2();
    });
    
}

字符串

相关问题