11

我将 jquery-chosen 用于我的组合框。

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

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

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

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

4 回答 4

17

我不喜欢 Chosen 插件附带的大量 CSS，但我能够覆盖一些样式来实现它。最终结果如下所示：

.chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}
于 2013-11-18T22:32:05.827 回答
3

它很旧，但我已经搜索了此功能并遇到了这篇文章。这是我为圆角等添加到 Shawn Millers Answer 的内容。

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。

于 2015-03-05T11:52:59.137 回答
2

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

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>
于 2017-11-29T20:14:28.037 回答
1

我只对一些用跨度包装选择器的组件这样做。这样，我可以控制组件何时下降或上升。

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 组件的选择包装会下拉列表

于 2018-11-30T12:29:13.643 回答