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

2019-07-02 08:24:44 阅读：241 来源： 互联网

标签：jquery javascript css 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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