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

问题：

我正在向页面动态添加一个Chosen Select框.点击按钮后,我想用红色勾勒出选中框.我已经可以为输入框执行此操作,例如通过在适当的ID中添加具有CSS的类,但选择框的边框永远不会更改.

.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框的设置继承选择类.

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

解决方法:

您正在尝试将该类添加到#chosenTest选择,但该元素实际上不可见.可见元素只是一个输入字段.我不知道Chosen是否足以知道你是否可以为该元素指定一个id,但是我能够像这样添加类：

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

标签：jquery,javascript,css,jquery-chosen
来源： https://codeday.me/bug/20190702/1354138.html