javascript - 从选择框中显示确认删除框

Question

我有这个表格来管理一篇文章。在“操作”中，我选择文章并选择批准、存档或删除。从选择框中。然后我点击接受按钮。

HTML:

<form action="#" method="POST">
    <select class="form-control contentgroup input-sm" name="action" id="action">
        <option value=""></option>
        <option value="addtoarchive">Archive</option>
        <option value="removefromarchive">approve</option>
        <option value="delete">Delete</option>
    </select>
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="240" />Article 1
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="241" />Article 2
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="242" />Article 3
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="243" />Article 4
    <br>
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
    <div class="modal-body">Are you sure?</div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
</div>

我添加了一个 Bootstrap 确认模态 Bootstrap ，如下所示:

$('button[name="remove_levels"]').on('click', function (e) {
    var $form = $(this).closest('form');
    e.preventDefault();
    $('#confirm').modal({
        backdrop: 'static',
        keyboard: false
    })
        .one('click', '#delete', function (e) {
        $form.trigger('submit');
    });
}); 

这适用于接受按钮，但仅在我选择删除并从列表中选择一篇文章后，我需要显示确认模式框。

如何使用 jQuery 和 Bootstrap 模式框创建此行为？

JSFIDDLE DEMO

Answer 1

您需要做的是监听 select change 事件。

你可以试试这样的东西

$('select[name="action"]').on('change', function (e) {
var $form = $(this).closest('form');
var checked = $( "input:checked" ).length;  

e.preventDefault();

if($(this).val()==="delete" && checked) {
    $('#confirm').modal({
      backdrop: 'static',
      keyboard: false
    })
      .one('click', '#delete', function (e) {
       $form.trigger('submit');
    });
  }
});

这是一个 jsfiddle 的链接 http://jsfiddle.net/dh0g6cge/