Select2 选中后如何给输入框添加css样式答案

【问题标题】：Select2 how to add css style to input box after selectedSelect2 选中后如何给输入框添加css样式
【发布时间】：2021-09-17 21:57:01
【问题描述】：

当用户选择一个值时，我正在尝试向 select2 框添加一个 css 样式。但我找不到如何做到这一点。我可以更改并添加到 css 文件中，但是即使显示占位符并且没有进行选择，它也会有这个。当我向 html 添加一个类时，它不会添加我需要完成的更改。

我需要在选择值时aplied的以下css，因此当占位符被选定值的值替换时，因此arpartclear事件是触发器时。这可能吗？我在任何地方都找不到它，而且我对这一切有点陌生，很抱歉这个愚蠢的问题（英语不是我的主要语言..）

border-bottom: 1px solid #b3b3b3 !important;

我使用以下脚本：

php/html

<select id="filteruser" class="select_test">
   <?php while ($row33 = $result33->fetch_assoc()) { ?>
        <option value="<?php echo $row33['user']; ?>"><?php echo $row33['name']; ?></option>
    <?php } $stmt33->close();?>
    
    </select>

选择 jquery

<script type="text/javascript">
    $(document).ready(function () {
$("#filteruser").select2( {
    placeholder: "Filter user",
    allowClear: true
    } );
$('#filteruser').val('<?php echo $_SESSION['user']; ?>'); // Select the option with a value of 'the current filter'
$('#filteruser').trigger('change'); // Notify any JS components that the value changed

} );
</script>

编辑：HTML 输出控制台：

 <select id="filteruser" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
            <option></option> 
        <option value="123">name3</option>
            <option></option> 
        <option value="124">name4</option>
            <option></option> 
        <option value="125">name5</option>
            <option></option> 
      
        
    </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 51px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-filteruser-container" aria-owns="select2-filteruser-results" aria-activedescendant="select2-filteruser-result-cx2p-123296"><span class="select2-selection__rendered" id="select2-filteruser-container"><span class="select2-selection__placeholder">Filter user</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

【问题讨论】：

请将您的完整代码提供到 sn-p
感谢您的回复。还没有这样做，我现在不知道该怎么做。我将研究如何做到这一点。
你的 select2 版本是什么？

标签： javascript jquery css jquery-select2

【解决方案1】：

使用 JavaScript 事件 oninput 输入完成后，函数将像下面的 sn-p 一样运行

function demofunc() {
  document.getElementById("demo").style.borderBottom = "1px solid #b3b3b3"
}

select {
  outline: none;
  border: none;
}

<select oninput="demofunc()" id="demo">
  <option value="0">Select car:</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
</select>

【讨论】：

感谢您的建议！它不适用于 select2 框 :( –
我认为它不起作用，因为默认选择被 select2 jquery 脚本隐藏。所以 oninput 没有被调用。
你能像我提供的那样提供一个可运行的sn-p吗

【解决方案2】：

你必须在选项中提供：selectionCssClass:

$('#filteruser').select2({
      selectionCssClass: 'my-class-section'
    });

还有 CSS：

.my-class-section{
  border-bottom: 1px solid #b3b3b3 !important;
}

【讨论】：

感谢您的建议！它不适用于 select2 框:(
@Martin15789 显示运行此代码后创建的 HTML DOM $("#filteruser").select2( { placeholder: "Filter user", allowClear: true } );
感谢您的回复。还没来得及反应早。我将控制台的 html 响应添加到问题中。我在想我需要使用 jquery 将一个类添加到未隐藏的部分并将我的 CSS 样式存储在该类中，以便它以 select2 为主题。但我还不知道如何做到这一点。
@Martin15789 我更新了答案，看看
谢谢。但它也不会影响选择框:(

【解决方案3】：

经过一番搜索，我想出了以下解决方案。我使用 jquery 来查找现有的类并向现有的类添加一个类。这样我就可以为该类添加样式并设置选择框的样式。

$('.select2').addClass('someclass')

在这里找到答案：

How to add two classes to an existing class with jquery?

感谢大家的帮助！

【讨论】：