Изменить только один выбранный стиль в плагине jquery

Question

Итак, я использую плагин selected - jquery для выбора.

Скажем, у меня есть четыре выбора на веб-странице, и я хочу, чтобы последний открылся вверх. Я знаю, как изменить стиль, чтобы открыть выбор вверх, но я не могу понять, как это сделать только для одного выбора. Это, вероятно, тривиально, но я нигде не смог найти ответ

Чтобы установить его, я скачал файлы selected. jquery .min. js, а также selected. css и я поместил следующий код в мой js файл, который обрабатывает все выборки:

$(document).ready(function() {
  $('select').chosen({ width: '100%', disable_search_threshold: 9 });
});

Возможно, мне следует добавить классы для выбора, добавить стиль, который я хочу переопределить в selected2. css, верно? Но тогда как связать эти конкретные селекты с новым css файлом?

Вот скрипка того, что я пытаюсь выполнить sh: fiddle

Answer 1

РЕДАКТИРОВАНИЕ:

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

Drop Up

<div class="drop-up">
  <div class="box" style="margin-left: 50px; margin-top: 15px;">
    <select class="chosen-select">
        <option selected="selected">10</option>
        <option>20</option>
        <option>50</option>
        <option>100</option>
    </select>
  </div>
</div>

CSS

.drop-up .chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}

Дайте мне знать, если это то, что вы ищете:)

Answer 2

Я думаю, вы можете использовать классы или идентификаторы в вашем теге выбора, например:

$(document).ready(function() {
  $('select.last').chosen({ width: '100%', disable_search_threshold: 9 });
});

или

$(document).ready(function() {
  $('#last').chosen({ width: '100%', disable_search_threshold: 9 });
});