根據從 ajax 返回的數據，渲染 Html select 列表

Question

我有一個 select 列表，我想根據來自 ajax 調用的值設置選定的選項，但是 select 列表不會出現，但會呈現給其他所有內容。 問題出在我的 if-else 語句上。 有沒有一種方法可以在沒有 if-else 的情況下根據 ajax 值設置所選選項

這是我的 javascript function：

function FillUserTable() {


        $.ajax({
            url: "/Home/GetAllUsers",
            type: 'GET',
            dataType: "json",
            traditional: true,
            success: function (data) {
                $("#EditUserDiv").css("display", "block");
                $("#MainPage").css("display", "none");
                $("#AllUsersTable2").dataTable().fnDestroy();
                $('#AllUsersTable2').DataTable({
                    paging: true,
                    processing: true, // control the processing indicator.
                    retrieve: true,
                    LengthMenu: false,
                    responsive: true,
                    aaData: data,
                    columns: [
                        { "data": "NationalID" ,"title": "هوية المستخدم" },
                        { "data": "username", "title": "اسم المستخدم" },
                        { "data": "FullName", "title": "الاسم" },
                        { "data": "MobileNumber","title": "رقم الهاتف" },
                        { "data": "Email","title": "البريد الالكتروني" },
                        { "data": "RoleName", "title": "صلاحية المستخدم" },
                        { "data": "IsActiveText", "title": "حالة المستخدم" },
                        {
                            data: null,
                            render: function (data, type, row) {
                                console.log(data.IsActive);
                                var htmlData= '<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#a'+data.NationalID+'">عرض</button>'+
                                    '<div class="modal fade" id="a'+data.NationalID+'" tabindex = "-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">'+
                                        '<div class="modal-dialog modal-lg" role="document">'+
                                            '<div class="modal-content">'+
                                                '<div class="modal-header">'+
                                                    '<h1 class="modal-title" id="test2" style="text-align: right;"> بيانات المستخدم</h1>'+
                                                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                                                '</div>' +

                                                '<div class="modal-body">' +
                                                        '<form action="" method="post">'+                                                                  
                                                                '<div class="row">' +
                                                                    '<div class="col-md-6">' +
                                                                        '<div class="form-group">' +
                                                                            '<label for="Email" class="control-label">البريد الإلكتروني</label>' +
                                                                            '<input type="text" id="Email' + data.NationalID + '" name="Email" value="' + data.Email + '" class="control-label"><br />' +
                                                                            '<label id="lblError'+data.NationalID+'" style="color:red;margin-right: -250px"></label>' +
                                                                        '</div >' +
                                                                    '</div >' 
                                                                    if (data.IsActive == 1) {
                                                                        htmlData = htmlData + '<div class="col-md-6">'
                                                                                                    '<div class="form-group">' +
                                                                                                        '<label for="IsActive" class="control-label">حالة المستخدم</label>' +
                                                                                                        '<select name="IsActive" id="IsActive' + data.NationalID + '">' +
                                                                                                            '<option  value="2">...</option>' +
                                                                                                            '<option selected value="1">نشط</option>' +
                                                                                                            '<option value="0">غير نشط</option>' +
                                                                                                        '</select>' +
                                                                                                    '</div >' +
                                                                                              '</div >'
                                                                    } else if (data.IsActive == 0) {
                                                                        htmlData = htmlData + '<div class="col-md-6">'
                                                                                                    '<div class="form-group">' +
                                                                                                        '<label for="IsActive" class="control-label">حالة المستخدم</label>' +
                                                                                                        '<select name="IsActive" id="IsActive' + data.NationalID + '">' +
                                                                                                            '<option  value="2">...</option>' +
                                                                                                            '<option value="1">نشط</option>' +
                                                                                                            '<option selected value="0">غير نشط</option>' +
                                                                                                        '</select>' +
                                                                                                   '</div >' +
                                                                                               '</div >'
                                                                    }
                                                                    else {
                                                                        htmlData = htmlData + '<div class="col-md-6">'
                                                                                                    '<div class="form-group">' +
                                                                                                        '<label for="IsActive" class="control-label">حالة المستخدم</label>' +
                                                                                                        '<select name="IsActive" id="IsActive' + data.NationalID + '">' +
                                                                                                            '<option  value="2">...</option>' +
                                                                                                            '<option value="1">نشط</option>' +
                                                                                                            '<option selected value="0">غير نشط</option>' +
                                                                                                        '</select>' +
                                                                                                   '</div >' +
                                                                                               '</div >'
                                                                    }
                                                                    htmlData = htmlData +  ' </div > ' +
                                                                                            '<div class="row">' +
                                                                                                '<div class="col-md-6">' +
                                                                                                        '<div class="form-group">' +
                                                                                                            '<label for="RoleId" class="control-label">صلاحية المستخدم</label>' +
                                                                                                                    '<select name="RoleId" id="RoleId' + data.NationalID + '">' +
                                                                                                                    '<option  value="0">...</option>' +
                                                                                                                    '<option value="1">رئيس جهة</option>' +
                                                                                                                    '<option value="2"> ممثل لجنة</option>' +
                                                                                                                    '<option value="3">رئيس أو موظف لجنة</option>' +
                                                                                                                    '<option value="4"> عضو لجنة</option>' +
                                                                                                                '</select>' +
                                                                                                        '</div >' +
                                                                                                '</div >' +
                                                                                            ' </div > ' +
                                                                                    '</form >'+
                                                                               '</div > ' +

                                                                                '<div class="modal-footer">'+
                                                                                    '<button id="close' + data.NationalID + '" type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>'+
                                                                                    '<button type="button" onclick="UpdateUserBtn(' + data.NationalID + ')" class="btn btn-primary">تعديل المستخدم </button>'+
                                                                                '</div>'+
                                                                            '</div>'+
                                                                        '</div>'+
                                                                    '</div >'

                                return htmlData;

                            }
                        },
                    ],
                    });
            },
            error: function (xhr, status, thrownError) {
                e.preventDefault();

                $.notify(
                    "حدث خطأ أثناء تحميل البيانات, الرجاء المحاولة مرة أخرى",
                    {
                        globalPosition: 'top center',
                        className: 'error'
                    }
                );
            }
        });
    }

當我使用console.log(data.IsActive); 值將是正確的，它是 0 或 1

Answer 1

在您的if 、 else if和else塊中顯示此 select，每一行如下所示：

htmlData = htmlData + '<div class="col-md-6">'

你在它的末尾錯過了一個+運算符！ 所以它不會將 html 代碼的 rest 添加到htmlData中，只需添加這些+ s 就可以了...

但是，我建議您重新構建代碼並編寫更多小的組合片段，而不是在一個地方完成所有這些，此外，當您在多行上創建大字符串時，請考慮使用 (`) 反引號而不是(' 或 ") 引號，它將使您擺脫所有這些+ s