将错误类添加到selected.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;
}

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

提前致谢！

Answer 1

问题在于，所选内容会编辑HTML元素，而一旦被选中的内容就会变成自定义div。 您可以做的是使用'.chosen-container'类获取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来回显错误类，则可以使用jQuery作为应用样式的变通方法，这样，如果您在选择时回显了类“ error”，则jQuery会将其应用于div。

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