如何在从 select2 中删除标签之前显示确认框答案

【问题标题】：How to show confirm box before removing tag from select2如何在从 select2 中删除标签之前显示确认框
【发布时间】：2017-08-22 17:57:07
【问题描述】：

如何在从 select2 中删除标签之前显示确认框？我有一个文本框，我在其中选择了两个选项来删除其中的任何一个我想显示警告消息。任何人都可以帮助我吗？在 HTML 中，我有元素为

    <div class="form-group">
    <label for="name" class="col-lg-3 control-label required">Select Type</label>
    <div class="col-lg-9">
        <select id="typeselect" class="form-control" name="crm" required>
            <option value='0'>Select Type</option>
            <option value='1'>Type1</option>
            <option value='2'>Type2</option>
        </select>
    </div>
  </div>

并且在js文件中

$("#typeselect").select2({
        placeholder: 'Select Type'
    });

【问题讨论】：

到目前为止你有什么尝试？包含一个 sn-p 或一些相关代码是个好主意
发布您的代码？
您是否编写了删除选项的代码，或者您是否“希望”我们也会创建该选项？=
@sunshine 你检查过我下面的答案了吗？有效吗？
@sunshine 问题解决了还是代码还有问题？

标签： jquery laravel jquery-select2

【解决方案1】：

这里有两种方法：

使用简单的Confirm，例如if (confirm("Are you sure?")) {// your deletion code}
使用Jquery-UI - Dialog见下面的例子

$("#typeselect").select2({
  placeholder: 'Select Type'
});

$("#remove").click(function() {
  var selectedval = $("#typeselect option:selected").val();
  if (selectedval > 0) {
    $("#dialog-confirm").dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $("#typeselect option:selected").remove();
          $(this).dialog("close");
        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  }
})

#dialog-confirm {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group">
  <label for="name" class="col-lg-3 control-label required">Select Type</label>
  <div class="col-lg-9">
    <select id="typeselect" class="form-control" name="crm" required>
            <option value='0'>Select Type</option>
            <option value='1'>Type1</option>
            <option value='2'>Type2</option>
        </select>
    <button id="remove">Remove selected value</button>
    <div id="dialog-confirm" title="Delete option">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Do you wish to delete this option?</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

function deleteItem() {
   if (confirm("Are you sure?")) {
     $("#type option:selected").remove();
   }
   return false;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='type'>
<option value='1'>Type1</option>
<option value='2'>Type2</option>
</select>
<button onclick='deleteItem()'>Remove</button>

在option 标签上添加onClick 事件，例如：

<select id='type'>
    <option value='1'>Type1</option>
    <option value='2'>Type2</option>
</select>
<button onclick='deleteItem()'>Remove</button>

然后您需要像这样将confirm() 添加到您的deleteItem();：

function deleteItem() {
   if (confirm("Are you sure?")) {
     $("#type option:selected").remove();
   }
   return false;
}

请试试这个，如果这解决了您的问题，请告诉我！！

【讨论】：