Question

我正在使用Select2，并使用以下代码在其开头添加一个自定义按钮：

$("#select2-ddlCustomer-container").off().on('click',
  function() {
    $("#ddlCustomer-add").remove();
    $("#select2-ddlCustomer-results")
      .before("<div id='ddlCustomer-add'><i class='fas fa-user-plus'></i>&nbsp;&nbsp;Create new customer</div> ")
      .promise().done(function() {
        $("#ddlCustomer-add").off().on('click',
          function() {
            alert('test');
          });
      });
  });

但是，即使我没有将选择框打开，它也会自动突出显示第一个选项，这意味着当我将鼠标悬停在“创建新客户”按钮上时，列表中的第一个选项也会被突出显示最终用户看起来很困惑。

有谁知道我该如何阻止它默认突出显示一个选项，并且仅当鼠标实际上悬停在该选项上时才突出显示一个选项？

Answer 1

当我将鼠标悬停在“新建”按钮上时，通过添加以下代码从所有选项中删除突出显示类，我解决了该问题，从技术上讲，这不会取消选择该选项，因此无法解决该问题即使我没有将鼠标悬停在下拉列表上时，列表中的第一个选项也会突出显示，但目前它是可行的解决方案：

$("#ddlCustomer-add").hover(function () {

        // Un-highlight all options
        $('.select2-results__option').removeClass('select2-results__option--highlighted');

});

将鼠标悬停在选择框上时，Select2不突出显示一个选项

1 个答案: