如何实现点击selectpicker选项但不选中该选项？

要实现点击"two"选项时不选中它，同时保留原有选中项，且不使用disabled属性，你可以通过监听Bootstrap Select生成的下拉选项点击事件，拦截指定选项的选中行为，具体实现如下：

实现思路 #

• Bootstrap Select会将原生select转换成自定义下拉菜单，因此需要监听其生成的下拉选项点击事件，而非原生select的change事件
• 当点击data-value为"two"的选项时，阻止事件的默认行为和冒泡，避免插件触发选中状态更新
• 保留当前select的原有选中值，确保点击"two"后不会替换之前的选中项

修改后的完整代码 #

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <label for="roomOne" class="form-label">Room One</label>
            <select name="roomOne" id="roomOne" class="form-control selectpicker">
                <option value="1" data-value="one" dataset="pickerone">One</option>
                <option value="2" data-value="two" dataset="pickerone">Two</option>
                <option value="3" data-value="three" dataset="pickerone">Three</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="roomTwo" class="form-label">Room Two</label>
            <select name="roomTwo" id="roomTwo" class="form-control selectpicker">
                <option value="1" data-value="one" dataset="pickertwo">One</option>
                <option value="2" data-value="two" dataset="pickertwo">Two</option>
                <option value="3" data-value="three" dataset="pickertwo">Three</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="roomThree" class="form-label">Room Three</label>
            <select name="roomThree" id="roomThree" class="form-control selectpicker">
                <option value="1" data-value="one" dataset="pickerthree">One</option>
                <option value="2" data-value="two" dataset="pickerthree">Two</option>
                <option value="3" data-value="three" dataset="pickerthree">Three</option>
            </select>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script>
$( document ).ready(function() {
    // 监听所有Bootstrap Select下拉选项的点击事件
    $(document).on('click', '.bootstrap-select .dropdown-menu .dropdown-item', function(e) {
        // 获取当前点击项对应的原生option元素
        const $option = $(this).data('original');
        // 判断是否是data-value为two的选项
        if ($option && $option.dataset.value === 'two') {
            // 阻止默认行为和事件冒泡，避免插件触发选中状态更新
            e.preventDefault();
            e.stopPropagation();
            // 可选：点击后关闭下拉菜单
            $(this).closest('.bootstrap-select').removeClass('open');
        }
    });

    // 保留原有的change事件逻辑
    $('.selectpicker').on('change',function() {
        $("#roomOne option").show();
        $("#roomTwo option").show();
        $("#roomThree option").show();
        $('.selectpicker').selectpicker('refresh');
    });
});
</script>
</body>
</html>

关键代码说明 #

• $(document).on('click', '.bootstrap-select .dropdown-menu .dropdown-item', ...)：用事件委托监听动态生成的下拉选项点击，确保所有select的下拉项都能触发逻辑
• $(this).data('original')：获取Bootstrap Select下拉项对应的原生option元素，用于判断是否是目标选项
• e.preventDefault() + e.stopPropagation()：阻止插件处理该点击事件，避免选中状态被修改
• 可选关闭下拉菜单：如果需要点击"two"后自动收起菜单，保留$(this).closest('.bootstrap-select').removeClass('open')即可

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