Multi Select Dropdown Bootstrap (MSDB)

I read in many forums that the select and multi-select issue has been resolved after the beta version of bootstrap 4.

Unfortunately I can't display multiselect like in bootstrap 3 and bootstrap 4.

Bootstrap 3 Snippets

$('select').selectpicker();

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

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

Bootstrap 4 Snippets

$('select').selectpicker();

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

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

Solutip

Since bootstrap select is a Bootstrap component and therefore you have to include it in your code like 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>

Creating Multiple Dropdown Menus

Multiple is a boolean attribute. If the number of drop-down options is very large and takes up space, it is highly recommended to use this attribute, because it allows the dropdown to be equipped with scroll.

Example:

<form action="form_action.asp">
<select name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

RUN >>

How to Submit Form from Dropdown Menu Changes

Good afternoon guys, back again with me, the geeky developer who is itching to vent again about what he experienced while trying to solve problems around Dropdown.

I hope you are familiar with that term. Okay, so the story is I made a list of articles which have many categories, and of course I limit each list to only 100 lists per page (using pagination).

The challenge is how do I filter the list of articles based on the categories I choose via Dropdown? Okay, the answer is simple.

Wrap the dropdown into a form element and add the attribute onchange="this.form.submit()" in the opening tag of the select element.

Maybe my friends are still confused about how to implement it concretely. Okay, please pay attention to the following example.

<form action="myservlet/do" method="POST">
    <select name="myselect" id="myselect" onchange="this.form.submit()">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>
</form>

From the example above, let's say myservlet/do is my codeigniter segment uri, where do is a function that processes parameters based on the dropdown value. Okay, up to here you can imagine, so we no longer need to use a submit type button, because we have used the onchange="this.form.submit()" attribute in the select opening tag.

Good job!