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作为应用样式的变通方法，这样如果您在select上回显类'error'，jQuery会将它应用于div。 / p>
$(document).ready(function () { if($('select.chosen').hasClass('error')) { $('.chosen-container').addClass('error'); } });

将一个错误类添加到selected.js元素

1 个答案: