简体   繁体   中英

Outline Jquery Chosen Select box that was dynamically added

Problem:

I'm adding a Chosen Select box dynamically to a page. Upon button click, I would like to outline the Chosen box in red. I can do this already for input boxes and such by adding a class with the CSS below to the appropriate ID but the Chosen box's border never changes.

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

I know it's possible to change the outline color on the Chosen control because if I add the following CSS upon load of the page, all chosen boxes will outline as expected.

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

The following fiddle sets up the example of two dynamically added Chosen select box and one input box.

What I would like to happen:

Upon clicking the button, the first chosen box and the input box should outline in red as the .redOutlineTextBox class is added to both of them but the last chosen box should not highlight.

JSFiddle

Things I've Tried:

I've set the settings of the Chosen box inherit select classes.

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

According to the Chosen documentation, you can trigger an update. Upon adding the .redOutlineTextBox class, I tried calling this update with no results.

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

If you just want to highlight the box you can do this:

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

If you want to highlight all text input boxes regardless of other classes, do:

$("input[type='text']").addClass('redOutlineTextBox')

You're trying to add the class to the #chosenTest select, but that element isn't actually visible. The visible element is just an input field. I don't know Chosen well enough to know if you can specify an id for that element, but I was able to add the class to it like this:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM