Bootstrap 4 Multiselect Dropdown

Bootstrap 4 multiselect dropdown

Because the bootstrap-select is a Bootstrap component and therefore you need to include it in your code as you did for your V3

NOTE: this component only works in bootstrap-4 since version 1.13.0

$('select').selectpicker();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Boostrap 4 multiselect

I understand that you want the user to see checkmarks if an option is selected. In my opinion, this is the best way to go about it: https://stackoverflow.com/a/50897096/11743498

It adds a check mark after the selected option, and it is built into Bootstrap + jQuery

Angular multi select dropdown

I tried your code but the selected attribute works fine for me.

I created a snippet at w3schools that shows that it works: link to snippet

It looks like it's not selected because the selected options are greyed out because the control is inactive. If you add another option however that is not selected, you can see the difference. I created another snippet here.

My simplified code looks like that:

<select name="Sauces" multiple>
  <option value="Mustard">Mustard</option>
  <option selected value="Barbecue">Barbecue</option>
  <option value="Ketchup">Ketchup</option>
  <option selected value="Mayonaise">Mayonaise</option>
</select>

Also I found an Angular component which works great:

https://www.npmjs.com/package/ng-multiselect-dropdown

I created a stackblitz demonstrating the component with your data here

I hope this helps you further.

Why is multiselect not updating?

You should push changes in data to the visual component (there are no auto monitoring). We call it reactiveness, but of course it is not obvious that options element list is only data for BsMultiSelect.

So call UpdateData of BsMusltiSelect if there were many changes and you want to refresh whole control, or particular option updates:

  var index =15;
          bsMultiSelect.updateOptionSelected(index);
          bsMultiSelect.updateOptionDisabled(index);
          bsMultiSelect.updateOptionHidden(index);

if 15 option was changed

There are also pushers for particalar option insert and remove.

"View page source" of this snippet can show how API works: https://dashboardcode.github.io/BsMultiSelect/snippetJs.html

bootstrap multiselect dropdown with optgroup

Try this http://jsfiddle.net/g9byn80a/

<select id="msel" style="width:300px">
 <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
 </optgroup>
 <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
 </optgroup>
</select>

<script>
var memoryOne;

$("option").mouseover(function () {
    var selectedOne = $("optgroup:nth-of-type(1)").children("option:selected").index();
    memoryOne = selectedOne;
}).click(function () {
    var theSelectedIndex = $(this).index();
    var theParentIndex = $(this).parent().index();
    setTimeout(function () {
        clickEvent(theSelectedIndex, theParentIndex, memoryOne);
    }, 1);
});

function clickEvent(passedIndex, parentIndex, memoryOne, memoryTwo) {
    var selectionOne = memoryOne;

    var theParent = $("optgroup:eq(" + parentIndex + ")");
    var theOption = $("optgroup:eq(" + parentIndex + ") option:eq(" + passedIndex + ")");
    var theGrandParent = $("select");
    theParent.find("option:not(option:eq(" + passedIndex + "))").prop("selected", false);
}
</script>

---

Related Topics