Select2选中值后如何为输入框添加指定CSS样式且不影响占位符状态

你可以通过监听Select2的值变更事件，动态给渲染容器添加/移除自定义样式类的方式实现需求，具体操作步骤如下：

步骤1：添加自定义CSS样式 #

先在你的CSS文件里加入如下样式：

/* 仅当Select2有选中值时生效的样式 */
.select2-container--has-value .select2-selection--single {
    border-bottom: 1px solid #b3b3b3 !important;
}

步骤2：修改Select2初始化JS代码 #

调整你的JS代码，添加状态判断和事件监听：

$(document).ready(function () {
    $("#filteruser").select2({
        placeholder: "Filter user",
        allowClear: true
    });
    
    // 定义更新Select2样式的通用方法
    function updateSelect2Status() {
        // 获取Select2生成的渲染容器
        const $select2Wrap = $("#filteruser").next(".select2-container");
        // 判断当前是否有选中值
        if ($("#filteruser").val()) {
            $select2Wrap.addClass("select2-container--has-value");
        } else {
            $select2Wrap.removeClass("select2-container--has-value");
        }
    }

    // 初始化默认选中值
    $('#filteruser').val('<?php echo $_SESSION['user']; ?>');
    $('#filteruser').trigger('change');
    // 页面加载完成后先执行一次样式更新
    updateSelect2Status();

    // 监听Select2的值变化事件，值变更时自动更新样式
    $("#filteruser").on("change", function() {
        updateSelect2Status();
    });
});

实现原理 #

• Select2初始化完成后会在原生<select>元素后自动生成可视化的渲染容器，我们可以直接通过DOM关系获取到这个容器
• 每次Select2的值发生变化（包括选中值、点击clear按钮清空）时都会触发change事件，我们在事件回调中判断当前选中值是否为空，动态增删自定义类即可实现仅选中值时应用样式的需求
• 该方法兼容性好，不会影响Select2的其他默认功能，也不会修改原生Select2的逻辑

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