我想在这里问一下,虽然从我所做的所有搜索中,我找到的唯一答案是自定义选择选项是不可能的。
但是我偶然发现了一个带有自定义选项的页面
我认为上面的代码可能看起来像这样
<select>
<option>
<span style="float:left;">Option 1</span>
<span style="float:right;">Test</span>
</option>
</select>
但正如我所提到的,根本不可能定制这样的选项。
所以我只是想知道如何实现这样的事情?是否有这样的javascript / jquery选择/下拉插件可以提供这样的选项外观?
答案 0 :(得分:1)
有一个 bootstrap selectpicker插件。这可以让你实现这一目标。
在bootstrap selectpicker中有一个添加子文本的选项,如下所示。
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
</select>
您还可以在selectpicker中添加“添加新选项”按钮作为<option data-content="<span class='btn btn-link'><i class='fa fa-plus text-primary'></i> Add new</span>"></option>
示例:
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
<option data-content="<span class='btn btn-link'><i class='fa fa-plus text-primary'></i> Add new</span>"></option>
</select>
包含你的html代码后,用jquery初始化你的selectpicker,如下所示。
$('.selectpicker').selectpicker({
size: 4
});
这个selectpicker插件有很多选项。有关详细信息,请参阅此link。
如果您想在下拉菜单中显示 Subtext as First text ,则可以使用以下示例。
<select class="selectpicker" data-size="5">
<option data-subtext="<span class='leftMen pull-left'>Sub Text</span>">Main Text </option>
<option data-content="<span class='btn btn-link'><i class='fa fa-plus text-primary'></i> Add new</span>"></option>
</select>
leftMen
类的定义如下。
.leftMen{
padding-top: 3px;
padding-right:5px;
}
示例屏幕在这里(请注意,这不是我在此处编写的代码的输出。这只是为了显示selectpicker插件的行为):
<强>演示:强>
$('.selectpicker').selectpicker(); //Initialize selectpicker
$(".muted.text-muted").addClass("pull-right"); //after the initialization we add pull-right class to the class 'muted text-muted' so that the sub-text will be displayed on right.
.bootstrap-select.btn-group .dropdown-menu li a span.text
{
display: inline-block;
width: 100% !important; //This is also necessary to change the default class by adding this line of code to set the width of the option to 100% then only the sub-text will be pulled to right
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<select class="selectpicker" data-size="5">
<option data-content="<span class='btn btn-link'><i class='fa fa-plus text-primary'></i> Add new</span>"></option>
<option data-subtext="Sub Text1">Main Text1 </option>
<option data-subtext="Sub Text2">Main Text2 </option>
<option data-subtext="Sub Text3">Main Text3 </option>
<option data-subtext="Sub Text4">Main Text4 </option>
</select>
答案 1 :(得分:-1)
请为此尝试select2 https://select2.org/
但是,您不能只定制选择选项。 Select2将为您创建一个占位符。