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

Question

Just want to ask here, although from all the searches that i did, the only answer i ever found was customizing select's option is just not possible.

However i stumbled upon a page with customized option on it

I was thinking the code of the above might look something like this

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

But as i mentioned, customizing such option is not possible at all.

So i just want to know how to achieve such thing? Is there such javascript/jquery select/dropdown plugins out there that can provide such option look?

Answer 1

There is a bootstrap selectpicker plugin . Which allows you to achieve this.

In bootstrap selectpicker there is an option to add subtext like as below.

<select class="selectpicker" data-size="5">
  <option data-subtext="Heinz">Ketchup</option>
</select>

You can also add button like add new as an option in selectpicker as <option data-content="<span class='btn btn-link'><i class='fa fa-plus text-primary'></i> Add new</span>"></option>

Example:

<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>

After including your html code initialise your selectpicker with jquery as below.

$('.selectpicker').selectpicker({
  size: 4
});

There are lots options with this selectpicker plugin. Please Refer this link for more details.

If you want to display the Subtext as First text on the dropdown then you can use the below example.

<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>

The leftMen class is defined as below.

.leftMen{
    padding-top: 3px;
    padding-right:5px;
 }

Sample Screen is here ( note that this is not the output of the code that i have written here. This is just to show the behaviour of selectpicker plugin ):

Demo:

 $('.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> 

Answer 2

Please try select2 for this https://select2.org/

But yes, you can't just customize the select option. Select2 will create a placeholder for you.