1

I have a select dropdown with multiselect checkbox option

Initial View

enter image description here

After selecting value

enter image description here

Selection of value is working fine, but in the first image the checkbox are not visible

I have used bootstrap select multiple select box functionality.

code:

<select class="form-control fruits selectpicker" multiple  id="fruits" name="fruits" title="fruits">
    <option value="">apple </option>
    <option value="banana">banana</option>
    <option value="orange">orange</option>
    <option value="grapes">grapes</option>
  </select>

I want that in the first image the checkbox should be visible, can anyone tell me how to display it

Sam
  • 1,381
  • 4
  • 30
  • 70
  • Can you please explain what exactly do you want? Also can you please create a fiddle? – SRK Apr 06 '18 at 07:20
  • @ Smit Raval i want a check box inside the dropdown on click of that checkbox it should get selected. – Sam Apr 06 '18 at 07:27
  • @lakshmipriya so you mean to say checboxes are coming, just not visible initially. When you click on it, it checked and start showing? – Alive to die - Anant Apr 06 '18 at 07:30
  • Perhaps you can find your solution here: https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option –  Apr 06 '18 at 07:32

1 Answers1

0

I had the same problem with selectpicker.

Here is a solution:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

....
.dropdown-item:not(.selected) span.check-mark::before {
    content: "\f0c8" !important;
    border:0;
    transform: rotate(0);
}
.bootstrap-select.show-tick .dropdown-item:not(.selected) span.check-mark {
    position: absolute;
    display: inline-block;
    right: 15px;
    top: 5px;
}



....
$('#selector').selectpicker({iconBase: 'fontawesome',tickIcon: 'far fa-check-square'});
tsig
  • 148
  • 2
  • 6