multiple select dropdown code example

Example 1: html select multiple

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

Example 2: how to choose multiple option from select option

<!-- JUST ADD multiple ATTRIBUTE WITHIN select ATTRIBUTE -->
Cars:<br>
<select name="car" multiple>
    <option value="Volvo">Volvo</option>
    <option value="Thar">Thar</option>
    <option value="Audi">Audi</option>
</select>

Example 3: multiple search selection dropdown

<div class="row">
  <div class="col-md-12">

    <select class="mdb-select colorful-select dropdown-primary md-form" multiple searchable="Search here..">
      <option value="" disabled selected>Choose your country</option>
      <option value="1">USA</option>
      <option value="2">Germany</option>
      <option value="3">France</option>
      <option value="4">Poland</option>
      <option value="5">Japan</option>
    </select>
    <label class="mdb-main-label">Label example</label>
    <button class="btn-save btn btn-primary btn-sm">Save</button>

  </div>
</div>

Example 4: asp multi select dropdown

<asp:ListBox runat="server" SelectionMode="Multiple" >
  <asp:ListItem Text="test1"></asp:ListItem>
  <asp:ListItem Text="test2"></asp:ListItem>
  <asp:ListItem Text="test3"></asp:ListItem>
</asp:ListBox>

Example 5: select 2 multiselect

//Installation
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>



// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

Example 6: html select multiple

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})