javascript - 动态添加的 Outline Jquery Chosen 选择框

Question

问题:

我正在添加 Chosen Select框动态到页面。单击按钮后，我想用红色勾勒出选择框。我已经可以为输入框执行此操作，例如通过将下面带有 CSS 的类添加到适当的 ID，但选择框的边框永远不会改变。

.redOutlineTextBox {
    border:2px solid #FF0000;
}  

我知道可以更改 Chosen 控件的轮廓颜色，因为如果我在加载页面时添加以下 CSS，所有选择的框都将按预期显示轮廓。

.chosen-container .chosen-single {
    border:2px solid #FF0000;
    box-shadow: 0 0 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
} 

下面的fiddle设置了两个动态添加的Chosen选择框和一个输入框的例子。

我希望发生的事情:

单击按钮后，第一个选择的框和输入框应显示为红色轮廓，因为 .redOutlineTextBox 类已添加到它们，但最后选择的框不应突出显示。

JSFiddle

我尝试过的事情:

我已经设置了 Chosen 框的设置继承选择类。

$(".chosen-select").chosen({
    width: "30%",
    search_contains: true,
    no_results_text: "No Results Found",
    max_selected_options: 5,
    inherit_select_classes: true
});

根据 Chosen 文档，您可以触发更新。添加 .redOutlineTextBox 类后，我尝试调用此更新但没有结果。

$('.chosen-select').trigger('chosen:updated');

Answer 1

您正在尝试将类添加到 #chosenTest 选择中，但该元素实际上并不可见。可见元素只是一个输入字段。我不太了解 Chosen，不知道您是否可以为该元素指定一个 id，但我能够像这样向它添加类:

$("#chosenTest_chosen input").addClass('redOutlineTextBox');