如何获取select2的值：取消选择

Posted 2023-05-07

【中文标题】如何获取select2的值：取消选择

【英文标题】：How to get value of select2:unselect

【发布时间】：2016-03-31 13:02:29

【问题描述】：

如何使用select2:unselect 获取Select2 中未选择选项的值

$('#mySelect').on("select2:unselect", function(e)

    var unselected_value = $('#mySelect').val(); // using this shows 'null'
    // or using below expression also shows 'null'
    var unselected_value = $('#mySelect :selected').val();

    alert(unselected_value);
).trigger('change');

在上面的代码警报中显示'null'

我需要使用select2:unselect，因为“更改”事件会同时感知:select 和:unselect。

【问题讨论】：

可以帮助github.com/select2/select2/issues/2959

不，情况并非如此，事件正在被触发，但我无法获取未选择选项的值。 @Mohamed-Yousef 还是谢谢你。

【参考方案1】：

其实数据值在事件对象里面。如果您正在处理 select2 多个值，这将很有用。

function(e)
    console.log(e.params.data)

【讨论】：

具体来说，e.params.data.id是选中/未选中项的value，e.params.data.text是innerText标签。

具体来说，当 event.type 是 select2:unselecting 然后使用event.params.args.data，否则，你会得到一个 undefined .

@Jcc.Sanabria 非常感谢！不知道为什么unselecting 有不同的参数结构，并且仍然没有记录。你是怎么发现args 在那里的？

大声笑，有一些调试。很高兴知道我可以帮助你。

澄清一下，这只适用于select2:unselect。如果您使用的是select2:unselecting，那么您需要访问e.params.args.data.id 而不是e.params.data.id

【参考方案2】：

这是一个较老的问题，但也许这个答案会对某人有所帮助。我正在使用带有多个值/标签的 Select2 v4.0.3，并且只需要删除特定的 ID。我真的不想使用其他答案中提到的 unselecting 事件。在unselect 事件中没有args 对象，因此您可以像这样获取您要删除的对象的ID...

jQuery('.mySelect2').on("select2:unselecting", function(e)
    return true; // I don't use this unselecting event but here is how you could use it to get the ID of the one you are trying to remove.
    console.log(e);
    console.log(e.params);
    console.log(e.params.args.data);
    console.log(e.params.args.data.id);
    //console.log(e.params.args.data.tag); data.tag is specific to my code.
);

jQuery('.mySelect2').on('select2:unselect', function (e) 
    console.log(e);
    console.log(e.params);
    console.log(e.params.data);
    console.log(e.params.data.id);
    //console.log(e.params.data.tag); data.tag is specific to my code.

    /*
    Now you can do an ajax call or whatever you want for the specific
    value/tag that you are trying to remove which is: e.params.data.id.
    */

【讨论】：

谢谢！挠了我好久。官方文档提到了data，但根本没有提到args！

这是更完整的答案，因此赞成

【参考方案3】：

最后，我找到了解决方案，那就是： 未选择选项的值仅在未选择之前可用。不是select2:unselect，而是select2:unselecting 现在代码将是：

$('#mySelect').on("select2:unselecting", function(e)
         var unselected_value = $('#mySelect').val();
         alert(unselected_value);
    ).trigger('change');

【讨论】：

这适用于单个选择。要从多个选择中删除一个项目，请参阅上面 gfrobenius 的答案。

【参考方案4】：

未选中的元素正在通过 e.params.data。我们可以使用 'id' 访问它的值，如果您需要文本，可以使用 'data.text'。

 $("select").on("select2:unselect", function (e) 
             var value=   e.params.data.id;
             alert(value);
    );

【参考方案5】：

如果您使用多个标签，则获取特定的选项值：

var unselected_value = $('#mySelect option:selected').val();
alert(unselected_value);

【参考方案6】：

这是我在 SVG 地图中更改城市背景颜色以查找特定城市名称的解决方案。希望对你有帮助

 $(".js-example-diacritics").on("select2:unselect", function(evt) 
                var element = evt.params.data.element;
                townColor(element.text, unHighLightColor);
            );

我将未选中的 select2 元素的文本（城市名称）和名为 unHighLightColor 的常量传递给方法 townColor()，其中包含颜色名称。

【参考方案7】：

在 Select2 4.0.3 上我发现 e.params 已更改。因此，要从取消选择的项目中找到 id，请像这样更改您的代码：

$('select').on('select2:unselecting', function (e) 
    var id = e.params.args.data.id; //your id
    alert('Are You Sure ?');
    e.preventDefault();
  // Do something with your id
);

【参考方案8】：

使用 $(this).val()，这将返回你在选择中标记的最后一个值

$('#mySelect').on("select2:unselecting", function(e)
         alert($(this).val());
    )

【讨论】：

这会显示所有选定的值。我怎样才能获得元素的价值，我只是试图通过点击交叉来取消选择

【参考方案9】：

@Mahmaood 阿里 感谢您的解决方案，它对我来说就像一个魅力。

对于@Vipin Kr。辛格问题。

  $('#mySelect').on("select2:unselect", function(e)
        var unselected_value = e.params.data.id;
    )
    $('#mySelect').on("select2:select", function(e)
        var selected_value = e.params.data.id;
    )

只有这样，您一次只能获得一个选中或未选中的值。