Bootstrap 3.4.1 nice-select下拉框选中后无法自动关闭问题求解

问题根因 #

你使用的该版本nice-select插件原生未实现「选中选项后自动关闭下拉框」的逻辑，仅监听了下拉框外部点击的关闭事件，因此出现选中后下拉框不收起的问题。

可选方案 #

方案1：修改插件源码（一劳永逸） #

找到插件代码中.nice-select .option:not(.disabled)的点击事件监听块，在触发原select的change事件后，添加关闭下拉框的逻辑即可。
修改后的对应代码片段如下：

e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){
  var s=e(this),n=s.closest(".nice-select");
  n.find(".selected").removeClass("selected"),s.addClass("selected");
  var i=s.data("display")||s.text();
  n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change");
  // 新增以下一行代码即可
  n.removeClass("open");
})

方案2：不修改插件源码，新增自定义事件监听（无侵入，适合不想改动第三方依赖的场景） #

直接在你页面的业务JS代码中添加以下代码即可：

// 仅针对当前countryList下拉框
$('#countryList').on('change', function() {
  $(this).next('.nice-select').removeClass('open');
});

// 如果需要适配所有nice-select实例，使用通用选择器即可
// $('select').on('change', function() {
//   $(this).next('.nice-select').removeClass('open');
// });

注意事项 #

如果你的showChange自定义函数中调用了event.stopPropagation()或者event.preventDefault()，也会阻止事件冒泡导致关闭逻辑失效，可删除对应代码，或在showChange函数末尾手动调用$('#countryList').next('.nice-select').removeClass('open')关闭下拉框。

内容的提问来源于stack exchange，提问作者John Adams