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);
}

以下小提琴设置了两个动态添加的选择框和一个输入框的示例。

我想要发生什么：

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

JSFiddle

我试过的事情：

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

$(".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

如果您只想突出显示该框，则可以执行此操作：

NO

如果要突出显示所有文本输入框而不考虑其他类，请执行以下操作：

$(".chosen-container input").addClass('redOutlineTextBox')

Answer 2

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

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

大纲Jquery Chosen选择动态添加的框

2 个答案: