Select2 - 选项项中的自定义输入字段,防止点击事件

Posted

技术标签:

【中文标题】Select2 - 选项项中的自定义输入字段,防止点击事件【英文标题】:Select2 - custom input field in option items, prevent events on click 【发布时间】:2020-02-03 20:20:31 【问题描述】:

我正在向 Select2 字段中启用“多个”的每个选项项添加文本输入,并且我需要在单击输入时阻止所有 Select2 事件,无论是在下拉状态还是在已选择状态任何情况下的药丸结果。

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

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

http://jsfiddle.net/6spf32Lx/

此 JSFiddle 将阻止下拉选项中的 Select2 事件,但不会阻止已选择的选项(单击输入将清除该选项)。它也不会阻止药丸结果输入中的事件。

【问题讨论】:

为您的查询添加了解决方案 【参考方案1】:

您的问题的解决方案是处理取消选择事件 select2:unselecting 可以防止

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 似乎都会清除/重新初始化选项项。

以上是关于Select2 - 选项项中的自定义输入字段,防止点击事件的主要内容,如果未能解决你的问题,请参考以下文章

无法在帖子中保存和显示更新的自定义多选下拉字段

Select2 多选项目显示在输入字段之外,与其他字段重叠

使用带有 select2 指令的 vue.js 方法

根据 WooCommerce 中的自定义结帐单选按钮和文本字段设置动态费用

如何向 WooCommerce Checkout 页面中的自定义选择框添加验证并应用 select2 样式。

我可以从我的自定义匹配器中访问原始的 select2 匹配器吗?