Изменение Chosen.js CSS с помощью JQuery

Question

Сначала я извиняюсь за то, что вы не указали код, но я не совсем уверен, что все включить, поскольку я использую плагин selected.js. Проблема, с которой я сталкиваюсь, заключается в том, что я хочу изменить css выбранного элемента select.js, используя jquery. Я могу изменить css в файле selected.css, но я не могу изменить его с помощью jquery. Нижеприведенный код работает с обычным типом ввода = текст, но не в любом из выпадающих меню selected.js. Ниже несколько фрагментов кода, которые я использую:

HTML:

<select class="chosen frm-field" id="program" name="program"> 
    <option selected="selected" value="0"></option> 
    <option value="1">Adult</option> 
    <option value="2">Dislocated Worker</option> 
    <option value="3">In-School Youth</option> 
    <option value="4">Out-of-School Youth</option> 
</select> 

JQuery:

function showErrors() { 
    $('#program').css({ 
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"}); 
} 

пытались добавить ВЫБРАЛИ .trigger, но расслоение плотной до сих пор не повезло:

$('#program').css({ 
    '-webkit-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    '-moz-box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)", 
    'box-shadow': "0px 0px 2px 2px rgba(255,0,0,1)"}).trigger("chosen:updated"); 

Проявленный код от Chrome Осмотр:

<select class="chosen frm-field error" id="program" name="program" style="display: none;"> 
    <option selected="selected" value="0"></option> 
    <option value="1">Adult</option> 
    <option value="2">Dislocated Worker</option> 
    <option value="3">In-School Youth</option> 
    <option value="4">Out-of-School Youth</option> 
</select> 
<div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 100%;" title="" id="program_chosen"> 
    <a class="chosen-single chosen-default"> 
     <span>Select One</span> 
     <div> 
     <b></b> 
     </div> 
    </a> 
    <div class="chosen-drop"> 
     <div class="chosen-search"> 
     <input type="text" autocomplete="off" readonly=""> 
     </div> 
     <ul class="chosen-results"> 
     <li class="active-result" data-option-array-index="1">Adult</li> 
     <li class="active-result" data-option-array-index="2">Dislocated Worker</li> 
     <li class="active-result" data-option-array-index="3">In-School Youth</li> 
     <li class="active-result" data-option-array-index="4">Out-of-School Youth</li> 
     </ul> 
    </div> 
</div> 

изменил идентификатор из выделенного html-файла на div, созданный выбранными.js, и отображает затенение, но не корректно.

Новый код JQuery:

$('#program_chosen').addClass('error'); 

изображение штриховки, используя этот код:

как ни странно, если добавить границы затенения непосредственно к .chosen-container-single & .chosen-single в файле CSS то граница появляется, как я ожидал. К сожалению, я только хочу, чтобы это произошло, когда пользователь отправил форму, но не имеет выбранной опции. Изображение ниже, чтобы показать текущее поведение:

После осознания этого я также узнал, что это работает, чтобы применить addClass .error к .chosen-container-single & .chosen-single через JQuery, и она работает, как ожидалось. Он применяет желаемую штриховку ко всем выбранным. Я пробовал #program_chosen.chosen-container-single #program_chosen.chosen-single, но ничего не происходит ...

Я чувствую, что я рядом, но мне не хватает окончательного соединения. Любые идеи приветствуются! Заранее спасибо!

- К сожалению, я работал над этим почти весь день, чтобы выяснить, что это была простая проблема. Спасибо Стиву за то, что он помог мне очистить свой код, используя addClass вместо того, чтобы писать затенение коробки снова и снова ... ошибка newb с моей стороны. Проблема заключалась в том, что высота div, которая была выбрана. Js была больше, чем пространство, в котором оно содержалось. Все, что мне нужно было сделать, это установить высоту в файле selected.css и волшебный пуф, идеально подходящий для оформления коробки. Это от нескольких других вещей, но они были просто исправлены путем корректировки некоторых полей. Как это глупо, я надеюсь, что это поможет кому-то еще избежать головной боли в будущем.

Answer 1

Я бы рекомендовал использовать класс для контроля состояния вашей ошибки.Попробуйте вместо этого:

function showErrors() { 
    $('#program').addClass('error'); 
} 

Затем добавьте этот CSS:

#program.error { 
    -webkit-box-shadow: 0px 0px 2px 2px rgba(255,0,0,1); 
    -moz-box-shadow': 0px 0px 2px 2px rgba(255,0,0,1); 
    box-shadow': 0px 0px 2px 2px rgba(255,0,0,1); 
} 

Конечно, вам нужно будет удалить этот класс, когда очищается ошибка, поэтому запустить это в нужное время:

$('#program').removeClass('error');