SweetAlert2 with HTML and Select

Question

私は、HTMLと選択機能の両方を含むsweetAlert2ポップを構築しました。問題は、選択ボックスが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 
      }); 

私はセレクトボックスをHTMLコードよりも上にしたいと考えています。この問題をどのように修正できるかについてアドバイスしてください。ここに私のコードです。

Answer 1

まず、あなたの配列定義が間違っています：文字列区切り文字を削除してください。

sweetalert2 onOpen eventを使用して、選択ボックスを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>