Chosen.jquery下拉列表

Question

我使用jquery选择我的组合框。

如果组合框位于屏幕底部，则无法下降。有没有办法获得一个下拉列表而不是下来？

演示页面的链接：http://harvesthq.github.io/chosen/

所以我在没有搜索的情况下制作组合框：

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

Answer 1

并不是Chosen插件附带的大量CSS的忠实粉丝，但我能够覆盖一些样式来实现它。最终结果如下：

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

Answer 2

它已经过时了，但我搜索了这个功能，并发现了这篇文章。 这是我添加到Shawn Millers答案的圆角等等。

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

谢谢戈登！只是为了添加您的回复，这是另一种选择。

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>

Answer 4

我只对包裹选择器并带有跨度的某些组件执行此操作。这样，我可以控制组件何时下降或上升。

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

span.dropUp .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;
}

span.dropUp .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;
}

然后在html中以这种方式放置。

<span class="dropUp">
        SELECT                              
</span>

只有带有span组件的select包装会下拉列表