时间戳

首页 > 解决方案 > 如何使materializecss下拉出现在选择框下方？

materialize - 如何使materializecss下拉出现在选择框下方？

问题描述

我正在使用materilizecss，我有以下下拉列表：

<select class="txtInput" data-val="true" data-val-number="The field SelectedAssetCategoryId must be a number." data-val-required="Select a asset category" id="ddlAssetCategory" name="SelectedAssetCategoryId"><option value="">Asset Category</option>
  <option value="1">Disease State/Condition Training</option>
  <option value="5">Hot Topics Training</option>
  <option value="6">Launch Training</option>
  <option value="7">Medical Meetings</option>
  <option value="2">Product Training</option>
  <option value="8">Quiz</option>
  <option value="4">Real World Evidence/HEOR Training</option>
  <option value="3">Treatment/Competitive Landscape Training</option>
</select>

我像这样初始化它：

 $("select").not('[multiple="multiple"]').formSelect({
 });

但我想要的是下拉显示在选择框下方而不是上方，所以我添加了以下代码行：

$("select").not('[multiple="multiple"]').formSelect({
           belowOrigin: true
     });

但即使这似乎不起作用，我可以添加什么选项以便下拉菜单显示在选择框下方？

标签： materialize

解决方案

用这个 ：

$("select").not('[multiple="multiple"]').formSelect({
      dropdownOptions: {coverTrigger: false}
});

代替 ：

$("select").not('[multiple="multiple"]').formSelect({
      belowOrigin: true
});

JSFiddle

实际上，dropdownOptions您可以通过下拉选项来选择表单。

推荐阅读