Выбранный список избранных событий

Question

Я использую jquery-selected для своих списков.

Если выпадающее поле находится в нижней части экрана, оно не может опускаться. Есть ли способ получить список выпадающих вместо down?

Ссылка на демо-странице: http://harvesthq.github.io/chosen/

Так что я сделать выпадающий без поиска:

$(".chosen-select").chosen({disable_search_threshold: 10}); 

Answer 1

Не огромный поклонник большого количества CSS Избранных плагин поставляется с, но я был в состоянии переопределите некоторые стили, чтобы это произошло. Конечный результат выглядит следующим образом: http://cl.ly/image/15352A1w471X

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

Answer 2

Это старое, но я искал для этой функции и наткнулся на эту статью. Вот что я добавил к Shawn Миллерз Ответ на закругленные углы и т.д.

jsfiddle

.chosen-container .chosen-drop { 
    border-bottom: 0; 
    border-top: 1px solid #aaa; 
    top: auto; 
    bottom: 40px; 
} 
.chosen-container.chosen-with-drop .chosen-single { 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    background-image: none; 
} 
.chosen-container.chosen-with-drop .chosen-drop { 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    box-shadow: none; 
    margin-bottom: -16px; 
} 

С использованием Twitter Bootstrap последнего краю дна будет что-то вроде -3px.

Answer 3

Thanks Gordon! Чтобы добавить к вашему ответу, вот еще один вариант.

CSS:

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

.chosen-container.chosen-with-drop .chosen-single.dropup { 
    background-image: none; 
} 

.chosen-container.chosen-with-drop .chosen-drop.dropup { 
    box-shadow: none; 
    margin-bottom: -16px; 
} 

JS:

$("select[dropup]").next().find(".chosen-drop").addClass("dropup"); 
$("select[dropup]").next().find(".chosen-single").addClass("dropup"); 

HTML:

<select id="selChosen" dropup style="width: 250px"></select>