如何实现Selectpicker分隔线下方选项可点击但不可选？

你可以通过自定义事件拦截+阻止默认选中行为来实现需求，不用disabled属性，具体步骤如下：

1. 给目标选项添加标识 #

先给需要点击操作的选项加一个自定义data属性，方便后续识别：

<select class="selectpicker">   
  <option value="view1">View 1</option>   
  <option value="view2">View 2</option>   
  <option data-divider="true"></option>   
  <!-- 添加自定义标识，用于区分可点击不可选中的选项 -->
  <option data-action="clickable">Edit Views</option>   
</select>    

2. 绑定事件处理逻辑 #

通过selectpicker的内置事件，拦截目标选项的选中行为，同时保留点击功能：

// 初始化selectpicker组件
$('.selectpicker').selectpicker();

// 下拉展开时，给目标选项绑定点击事件
$('.selectpicker').on('show.bs.select', function() {
  // 找到对应下拉项，先解绑旧事件再绑定新事件（避免重复绑定）
  $('.dropdown-menu li a[data-action="clickable"]').off('click').on('click', function(e) {
    // 阻止事件冒泡，避免selectpicker执行默认的选中逻辑
    e.stopPropagation();
    // 这里写你的点击操作逻辑，比如打开编辑弹窗、执行接口请求等
    console.log('编辑视图按钮被点击');
    // 示例：弹出提示框
    alert('开始编辑视图');
  });
});

// 处理键盘选中的情况（额外保险）
$('.selectpicker').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
  const targetOption = $(this).find('option').eq(clickedIndex);
  if (targetOption.data('action') === 'clickable') {
    // 恢复之前的选中值，避免该选项被选中
    $(this).selectpicker('val', previousValue);
    // 执行点击逻辑
    console.log('编辑视图通过键盘触发');
    alert('开始编辑视图');
  }
});

原理说明 #

• e.stopPropagation()阻止了selectpicker默认的选中事件传递，所以点击选项不会改变下拉框的选中值
• 绑定show.bs.select事件是因为selectpicker的下拉项是动态生成的，每次展开时重新绑定事件更可靠
• 键盘选中的处理是为了覆盖方向键选中的场景，确保无论鼠标还是键盘操作都符合需求

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