jquery - 如何禁用 select2 中的标题

Question

我有一个 select2 下拉列表，如下所示:

    $(function () {
  $("#itemSelect").select2().on("select2:select", function (e) {
   $("#itemSelect").val(-1).trigger("change");
        var id = e.params.data.title;
        var url = siteRoot + "/site/item?itemID=" + id ;
        $("#Container").load(url);
    });
});

它从我的 html 模型中获取它的值:

<select class="js-data-example-ajax" aria-expanded="true" style="width: 100%; display: none;" id="itemSelect">
<option disabled selected value="-1"> Search by item </option>
@foreach (var item in Model)
{
    <option text="@item.Id" title="@item.Id">
        item.Name
    </option>
}

一切正常，除了当我选择一个项目并加载它时，我可以将鼠标悬停在下拉列表上，它会显示该项目的 ID。我不想出示 ID!

在图片中，您可以看到当我将鼠标悬停在“冰茶”上时出现的下拉菜单和商品编号

我知道这是因为 select2 通过 var id = e.params.data.title; 获取 id，但是我该如何更改它呢？它不适用于 var id = e.params.data.id;

我尝试使用工具提示，但我对此很陌生。

//$("#select2-itemSelect-container").tooltip({
//    title: "Search item",

//    placement: "auto"
//});

我只想在鼠标悬停时删除下拉列表中的 ID。感谢您的每一次帮助。

Answer 1

我可能有点晚了，但这些解决方案都不适合我，因为我动态地将 select2 字段添加到 UI。

这段代码对我有用:

$('.select2-selection__rendered').hover(function () {
    $(this).removeAttr('title');
});

如果您还动态添加 select2 字段，请不要忘记始终在上面的代码之前执行此代码:

$('.select2-selection__rendered').unbind('mouseenter mouseleave');

此代码将首先删除所有 select2 字段上的 on href 监听器。