HTML 和 Select 的 SweetAlert2

Question

我构建了一个包含 HTML 和 select 功能的 sweetAlert2 pop。问题是 Select 框正在 HTML 下方的弹出窗口底部加载。

            var array = '[{"teachName" : "Pending Account", "teachNum" : "99999999"},{"teachName" : "test, test", "teachNum" : "101-temp"}]';
            var options = {};
            $.map(array,
            function(o){
                options[o.teachNum] = o.teachName;
            });
            swal({
                title: date.format("MM/DD/YYYY"),
                type: 'info',
                input: 'select',
                inputOptions: options ,
                html: 'Teacher: ' + $("#teacher").val() + '<br /><br /><div style="border:2px solid purple;" >' +
                    'Hours: ' +
                    '<input type="text" autofocus id="hours" style="display:block !important;" class="sweet-alert-input"/>' +
                    '<br />Notes: ' +
                    '<br /><input type="text" autofocus id="notes" style="display:block !important;" class="sweet-alert-input"/></div>' +
                    '<button type="' + btn + '" id="btnD" value="' + date.format("MM/DD/YYYY") + '" class="sweet-alert2-button">Save Record</button> ' +
                    '<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>',

                showConfirmButton: false
            });

我希望 Select 框位于 HTML 代码之上。请告诉我如何解决这个问题。这是我的代码。

Answer 1

首先：你的数组定义是错误的：删除字符串分隔符。

您可以使用 sweetalert2 onOpen event 将您的 Select 框移动到 HTML 代码上方。

为了实现这个你可以使用.insertBefore()

onOpen: function(ele) {
   $(ele).find('.swal2-select').insertBefore($(ele).find('.swal2-content div'));
}

片段：

var array = [{"teachName": "Pending Account", "teachNum": "99999999"}, {"teachName": "test, test", "teachNum": "101-temp"}];
var options = {};
$.map(array, function (o) {
    options[o.teachNum] = o.teachName;
});
var btn = 'button';
swal({
    title: moment().format("MM/DD/YYYY"),
    type: 'info',
    input: 'select',
    inputOptions: options,
    html: 'Teacher: ' + $("#teacher").val() + '<br /><br /><div style="border:2px solid purple;" >' +
    'Hours: ' +
    '<input type="text" autofocus id="hours" style="display:block !important;" class="sweet-alert-input"/>' +
    '<br />Notes: ' +
    '<br /><input type="text" autofocus id="notes" style="display:block !important;" class="sweet-alert-input"/></div>' +
    '<button type="' + btn + '" id="btnD" value="' + moment().format("MM/DD/YYYY") + '" class="sweet-alert2-button">Save Record</button> ' +
    '<button type="' + btn + '" id="btnC" style="background-color: #B9B9B9 !important;" class="sweet-alert2-button">Cancel</button>',

    showConfirmButton: false,
    onOpen: function(ele) {
        $(ele).find('.swal2-select').insertBefore($(ele).find('.swal2-content div'));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/sweetalert2/6.5.6/sweetalert2.min.js"></script>

HTML 和 Select 的 SweetAlert2

SweetAlert2 with HTML and Select

html

jquery

sweetalert

sweetalert2