2017-04-06 62 views
2

我已經構建了一個包含HTML和選擇功能的sweetAlert2彈出窗口。問題是選擇框正在加載在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代碼的上方。請告訴我如何解決這個問題。這是我的代碼。

回答

5

首先:你的數組定義是錯誤的:刪除字符串分隔符。

您可以使用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>

+0

大...感謝您的幫助。另外,是的,我知道這個數組是錯誤的。這是剛剛從JSON中複製,然後將其放入數組中。 – user3163084

+0

謝謝。你接受並贊成嗎? – gaetanoM

+0

完成。再次感謝。 – user3163084