使用自定义选项标签选择/下拉

时间:2017-09-12 09:01:50

标签: javascript jquery html select

我想在这里问一下,虽然从我所做的所有搜索中,我找到的唯一答案是自定义选择选项是不可能的。

但是我偶然发现了一个带有自定义选项的页面

enter image description here

我认为上面的代码可能看起来像这样

<select>
    <option>
        <span style="float:left;">Option 1</span>
        <span style="float:right;">Test</span>
    </option>
</select>

但正如我所提到的,根本不可能定制这样的选项。

所以我只是想知道如何实现这样的事情?是否有这样的javascript / jquery选择/下拉插件可以提供这样的选项外观?

2 个答案:

答案 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插件的行为): enter image description here

<强>演示:

$('.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将为您创建一个占位符。