SweetAlert2 with HTML and Select

Question

I have built a sweetAlert2 pop that includes both HTML and select functionality. The problem is the Select box is loading at the bottom of the popup under the 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
            });

I would like the Select Box to be above the HTML code. Please advise on how I can remedy this issue. Here is my code.

Solution

First of all: your array definition is wrong: remove the string delimiters.

You can use the sweetalert2 onOpen event to move your Select Box above the HTML code.

In order to achieve this you can use .insertBefore()

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

The snippet:

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>