将错误 [​​=11=] 添加到 chosen.js 元素

Question

我正在使用以下 html + php:

<select class="chosen <?php echo (isset($error) ? 'error' : ''); ?>">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

和 JavaScript:

$('.chosen').chosen({width:"100%"});

和 css:

.error{
    border: 1px solid #ff0000;
}

我希望能够向所选元素添加错误 class，使其变为红色。问题是，它不起作用。所选元素保持不变（无红色边框）。

提前致谢！

Answer 1

问题是 chosen 编辑了 HTML 元素，曾经的 select 变成了自定义 div。您可以做的是使用“.chosen-container”class 获取 div 并在那里应用您的样式。

$('.chosen').chosen();

.chosen-container{
    border: 1px solid #ff0000;
}

select{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css" rel="stylesheet"/>

<select class="chosen">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

编辑

如果您仍想使用 php 回显错误 class，您可以使用 jQuery 作为应用样式的变通方法，如果您回显 class 'error' 在 select 上 jQuery 将它应用于 div。

$(document).ready(function () {
        if($('select.chosen').hasClass('error')) {
            $('.chosen-container').addClass('error');
        }
    });