Question

我正在将文本输入添加到启用了“多个”的Select2字段中的每个选项项上，并且在单击输入时，无论在下拉状态还是在已选择的状态中，都需要防止所有Select2事件在任何情况下都可以服药。

我从另一个similar question开始，并尝试通过尝试所有Select2 events来满足我的需要，但我似乎无法在每个地方阻止该事件显示输入字段。

<div class="slide active">
                    <div class="container">
                        <strong class="title"><strong><em>LX</em>&thinsp;Monarch</strong>&nbsp;&nbsp;&nbsp;&nbsp;High Definition&hellip;Single Touch Control<span>Powerful Simplicity&hellip;</span></strong>
                        <a href="LXMonarch_ProductPage.php" class="btn">Learn More</a>
                    </div>
                    <div class="bg-stretch">
                        <span data-srcset="images/prod02-sm.jpg, images/prod02-sm@2x.jpg 2x"></span>
                        <span data-srcset="images/prod02.jpg, images/prod02@2x.jpg 2x" data-media="(min-width: 768px)"></span>
                    </div>
                </div>

http://jsfiddle.net/6spf32Lx/

此JSFiddle将阻止下拉选项中的Select2事件，但对于已选择的选项（单击输入将清除该选项）不会阻止它。同样也不会阻止药丸结果输入中的事件。

Answer 1

您的问题的解决方案是处理取消选择事件 select2：取消选择可以避免

https://select2.org/programmatic-control/events

var stopOpening = false;

$('#my-select').select2({
	width: '300px',
  multiple: true,
  templateResult: function (item) {
    var $result = $('<span class="label">'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
    return $result;
  },
  templateSelection: function (item) {
    var $result = $('<span  class="label">'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
    return $result;a
  }
}).on({
    "select2:unselecting": function(e) {
        console.log("unselecting");
        if (e.params.args.originalEvent.target.className === 'input') {
            e.preventDefault();
        }
    },
    "select2:opening": function(e) {
        if(stopOpening == true){
            stopOpening = false;
            e.preventDefault();
        }
    }
});

test = function() {
    console.log("click");
    stopOpening = true;
}

.input {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select id="my-select">
    <option>red</option>
    <option>blue</option>
    <option>green</option>
    <option>yellow</option>
    <option>white</option>
    <option>black</option>
  </select>

Select2-选项项目中的自定义输入字段，可防止单击时发生事件

1 个答案: