大綱Jquery Chosen選擇動態添加的框

Question

問題：

我正在向頁面動態添加一個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');

Answer 1

如果您只想突出顯示該框，則可以執行以下操作：

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

如果要突出顯示所有文本輸入框而不考慮其他類，請執行以下操作：

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

Answer 2

您正在嘗試將該類添加到#chosenTest選擇，但該元素實際上不可見。 可見元素只是一個輸入字段。 我不知道Chosen是否足以知道你是否可以為該元素指定一個id，但是我能夠像這樣添加類：

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