Multi Select Drop Down With Checkbox

Show multiple select dropdown with checkboxes value in the text

If you have all the required libraries in place then you can use onChange like the following way:

$('select[multiple]').multiselect({
  columns: 2,
  placeholder: 'Select options',
  onChange: function(element, checked) {
    var options = $('#mySelect option:selected');
    var selected = [];
    $(options).each(function(index, brand){
        selected.push($(this).val());
    });
    $('#demo').text("You selected: " + selected.join(','));
  }
});

$('#demo').text("You selected: "+$('#mySelect').val());// to show the selected on page load
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<select id="mySelect" multiple class="form-control">
  <option value="Sila Pilih" selected>Sila Pilih</option>
  <option value="Kakitangan MPK">Kakitangan MPK</option>
  <option value="Ahli Majlis">Ahli Majlis</option>
</select>

<p id="demo"></p>

Multiple dropdowns with checkboxes

Regarding markup and styles

  • Label like <label>Hello world</label> should not be used without referencing a FormActionElement
  • Wrap the checkbox and the label text into <label> so that both are clickable
  • Use .is-active and .is-hidden CSS classes to describe a state
  • Use a ::before pseudo with content: for your arrow and use the .is-active (assigned to a component dropdown) to handle the arrow state
  • When using multiple checkboxes for the same purpose-name use a name attribute like name="states[]" so that you can catch all the selected values inside a states Array.
  • Use data-* attribute like data-name="Long name" to store the preview name.
  • Use CSS flex instead of floats
  • Always make a parent positioned (like relative) if you plan to make a child absolute

Regarding JavaScript

  • Create a function to handle all your custom dropdowns, by using jQuery's .each() like $dropdown.each(UI_dropdown); // Apply logic to all dropdowns
  • Than inside that function always reference a child element as the subset of this dropdown like $('.dropdown-button', this); to prevent targeting every single '.dropdown-button' in the DOM
  • Make sure to add a handler to document to close active dropdowns
  • Also make sure to close a dropdown if another dropdown is opened:

const $dropdown = $('.dropdown-container'); // Cache all;
function UI_dropdown() {
  const $this = $(this);  const $btn = $('.dropdown-button', this);  const $list = $('.dropdown-list', this);  const $li = $('li', this);  const $search = $('.dropdown-search', this);  const $ckb = $(':checkbox', this);  const $qty = $('.dropdown-quantity', this);

  $btn.on('click', function() {    $dropdown.not($this).removeClass('is-active'); // Close other    $this.toggleClass('is-active'); // Toggle this  });
  $search.on('input', function() {    const val = $(this).val().trim();    const rgx = new RegExp(val, 'i');    $li.each(function() {      const name = $(this).text().trim();      $(this).toggleClass('is-hidden', !rgx.test(name));    });  });
  $ckb.on('change', function() {    const names = $ckb.get().filter(el => el.checked).map(el => {      return `<span class="dropdown-sel">${el.dataset.name.trim()}</span>`;    });    $qty.html(names.join(''));  });}
$dropdown.each(UI_dropdown); // Apply logic to all dropdowns
// Dropdown - Close opened $(document).on('click', function(ev) {  const $targ = $(ev.target).closest('.dropdown-container');  if (!$targ.length) $dropdown.filter('.is-active').removeClass('is-active');});
/* QuickReset */ * { margin: 0; box-sizing: border-box; }
.dropdown-container {  position: relative;}
.dropdown-label {  padding: 4px 10px 4px 0;}
.dropdown-label:before {  content: "\25BC";}
.dropdown-container.is-active .dropdown-label:before {  content: "\25B2";}
.dropdown-button {  cursor: pointer;  padding: 10px;  border: 1px solid #d5d5d5;  background: white;  display: flex;  flex-flow: row wrap;}
.dropdown-quantity {  flex: 1;  display: flex;  flex-flow: row wrap;}
.dropdown-sel {  display: inline-block;  background: #eee;  border-radius: 3em;  padding: 2px 10px;  margin: 0 3px 3px 0;}
.dropdown-list {  position: absolute;  overflow-y: auto;  z-index: 9999999;  top: calc( 100% - 2px);  width: 100%;  max-height: 80vh;  padding: 10px;  padding-top: 0;  border: 1px solid #d5d5d5;  border-top: 0;  background: white;  display: none;}
.dropdown-container.is-active .dropdown-list {  display: block;}
.dropdown-list input[type="search"] {  padding: 5px;  display: block;  width: 100%;}
.dropdown-list ul {  padding: 0;  padding-top: 10px;  list-style: none;}
.dropdown-list li {  padding: 0.24em 0;}
input[type="checkbox"] {  margin-right: 5px;}
/* HELPER CLASSES */.noselect { user-select: none; }.is-hidden { display: none; }
<div class="dropdown-container">  <div class="dropdown-button noselect">    <div class="dropdown-label">STATES:</div>    <div class="dropdown-quantity"></div>  </div>
  <div class="dropdown-list">    <input type="search" placeholder="Search states" class="dropdown-search">    <ul>      <li>        <label><input value="AL" name="states[]" data-name="Alabama" type="checkbox">Alabama</label>      </li>      <li>        <label><input value="AK" name="states[]" data-name="Alaska" type="checkbox">Alaska</label>      </li>      <li>        <label><input value="AS" name="states[]" data-name="American Samoa" type="checkbox">American Samoa</label>      </li>      <li>        <label><input value="AZ" name="states[]" data-name="Arizona" type="checkbox">Arizona</label>      </li>      <li>        <label><input value="AR" name="states[]" data-name="Arkansas" type="checkbox">Arkansas</label>      </li>      <li>        <label><input value="CA" name="states[]" data-name="California" type="checkbox">California</label>      </li>      <li>        <label><input value="CO" name="states[]" data-name="Colorado" type="checkbox">Colorado</label>      </li>      <li>        <label><input value="CT" name="states[]" data-name="Connecticut" type="checkbox">Connecticut</label>      </li>    </ul>  </div></div>

<div class="dropdown-container">  <div class="dropdown-button noselect">    <div class="dropdown-label">POSITIONS:</div>    <div class="dropdown-quantity"></div>  </div>  <div class="dropdown-list">    <input type="search" placeholder="Search positions" class="dropdown-search">    <ul>      <li>        <label><input value="be" name="positions[]" data-name="Backend" type="checkbox">Backend</label>      </li>      <li>        <label><input value="fr" name="positions[]" data-name="Frontend" type="checkbox">Frontend</label>      </li>      <li>        <label><input value="hr" name="positions[]" data-name="HR" type="checkbox">HR</label>      </li>      <li>        <label><input value="de" name="positions[]" data-name="Arizona" type="checkbox">Designer</label>      </li>    </ul>  </div></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

how to use multiple select dropdown with checkboxes

Jquery Plugin Demo

You can apply this to your php code

$('select[multiple]').multiselect({  columns: 4,  placeholder: 'Select options'});
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><link href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/jquery.multiselect.css" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/jquery.multiselect.js"></script><style>  body {    font-family: 'Open Sans' Arial, Helvetica, sans-serif  }    ul,  li {    margin: 0;    padding: 0;    list-style: nont;  }    .label {    color: #000;    font-size: 16px;  }    .container {    max-width: 728px;  }</style>
<div class="container">  <h2>jQuery MultiSelect Basic Example</h2>  <select name="country" multiple class="form-control"><option value="">Country...</option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AG">Angola</option><option value="AI">Anguilla</option><option value="AG">Antigua & Barbuda</option><option value="AR">Argentina</option><option value="AA">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BL">Bonaire</option><option value="BA">Bosnia & Herzegovina</option><option value="BW">Botswana</option><option value="BR">Brazil</option><option value="BC">British Indian Ocean Ter</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="IC">Canary Islands</option><option value="CV">Cape Verde</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="TD">Chad</option><option value="CD">Channel Islands</option><option value="CL">Chile</option><option value="CN">China</option><option value="CI">Christmas Island</option><option value="CS">Cocos Island</option><option value="CO">Colombia</option><option value="CC">Comoros</option><option value="CG">Congo</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="CT">Cote D'Ivoire</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CB">Curacao</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="TM">East Timor</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FA">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="FS">French Southern Ter</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GB">Great Britain</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GN">Guinea</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HW">Hawaii</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IA">Iran</option><option value="IQ">Iraq</option><option value="IR">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="NK">Korea North</option><option value="KS">Korea South</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="MY">Malaysia</option><option value="MW">Malawi</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="ME">Mayotte</option><option value="MX">Mexico</option><option value="MI">Midway Islands</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar</option><option value="NA">Nambia</option><option value="NU">Nauru</option><option value="NP">Nepal</option><option value="AN">Netherland Antilles</option><option value="NL">Netherlands (Holland, Europe)</option><option value="NV">Nevis</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NW">Niue</option><option value="NF">Norfolk Island</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau Island</option><option value="PS">Palestine</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PO">Pitcairn Island</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="ME">Republic of Montenegro</option><option value="RS">Republic of Serbia</option><option value="RE">Reunion</option><option value="RO">Romania</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="NT">St Barthelemy</option><option value="EU">St Eustatius</option><option value="HE">St Helena</option><option value="KN">St Kitts-Nevis</option><option value="LC">St Lucia</option><option value="MB">St Maarten</option><option value="PM">St Pierre & Miquelon</option><option value="VC">St Vincent & Grenadines</option><option value="SP">Saipan</option><option value="SO">Samoa</option><option value="AS">Samoa American</option><option value="SM">San Marino</option><option value="ST">Sao Tome & Principe</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="OI">Somalia</option><option value="ZA">South Africa</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="TA">Tahiti</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad & Tobago</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TU">Turkmenistan</option><option value="TC">Turks & Caicos Is</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US">United States of America</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VS">Vatican City State</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="VB">Virgin Islands (Brit)</option><option value="VA">Virgin Islands (USA)</option><option value="WK">Wake Island</option><option value="WF">Wallis & Futana Is</option><option value="YE">Yemen</option><option value="ZR">Zaire</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option></select>  <h2>optgroup Example</h2>  <select name="basicOptgroup[]" multiple="multiple">        <optgroup label="Programming Languages">            <option value="C++ / C#">C++ / C#</option>            <option value="Java">Java</option>            <option value="Objective-C">Objective-C</option>        </optgroup>        <optgroup label="Client-side scripting Languages">            <option value="JavaScript">JavaScript</option>        </optgroup>        <optgroup label="Server-side scripting Languages">            <option value="Perl">Perl</option>            <option value="PHP">PHP</option>            <option value="Ruby on Rails">Ruby on Rails</option>        </optgroup>        <optgroup label="Mobile Platforms">            <option value="Android">Android</option>            <option value="iOS (iPhone, iPad and iPod Touch)">iOS (iPhone, iPad and iPod Touch)</option>        </optgroup>        <optgroup label="Document Markup Languages">            <option value="HTML">HTML</option>            <option value="SGML">SGML</option>        </optgroup>

How to implement Multi Select Drop Down with checkbox in Thymeleaf and display selected values to Spring controller

I implemented the following ,it works succesfully

Multi Selected DropDown
After Submit DisplaySelected 

    <form action="#" th:action="@{/display}"  th:object="${hobbyobj}" method="POST"> <div class="container">       <p><strong>Select Hobbies(Multiple):</strong>    <select id="multiple-hobbies" th:field="*{hobbieslist}" multiple="multiple">       <option th:each="hobby: ${predefinedhobbylist}"              th:value="${hobby}" th:text="${hobby}">    </select>    </p>     <input type="submit" value="submit"/></div>       </form>

HTML5 multiselect dropdown with checkboxes plugin. Designed as standard <select> dropdown

Bootstrap Multiselect -
http://davidstutz.github.io/bootstrap-multiselect/

In terms of appearance, you may have to use CSS to get the styling you want.

How to Create MultiSelect dropdown with checkboxes in Asp.NET MVC

Here is a sample, base on @jishan siddique suggestion.
You can visit the link to refer more: http://davidstutz.github.io/bootstrap-multiselect/

Hope to help, my friend :))

1. Model
public class ProductViewModel
    {
        public List<SelectListItem> Products { get; set; }
        public int[] ProductIds { get; set; }

    }

2. Controller
public IActionResult Index()
        {           
            var model = new ProductViewModel()
            {
                Products = GetProducts()
            };            
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(ProductViewModel product)
        {                
            return View(product);
        }

        private List<SelectListItem> GetProducts()
        {
            var data = new List<SelectListItem>()
                {
                    new SelectListItem()
                    {
                        Value = "1", Text = "Tomato"
                    },
                    new SelectListItem()
                    {
                        Value = "2", Text = "Orange"
                    },
                    new SelectListItem()
                    {
                        Value = "3", Text = "Potato"
                    }
                };
            return data;
        }

3. Views
@model CiberProject.ViewModels.ProductViewModel
@{
    ViewData["Title"] = "Home Page";    
}

<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.Label("Products:")
    <br />
    <br />
    @Html.ListBoxFor(m => m.ProductIds, Model.Products, new { @class = "listbox" })
    <br />
    <br />
    <input type="submit" value="Submit" />
}

@section Scripts
{
    <script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.listbox').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
}

Related Topics

How to Close Current Tab in a Browser Window

Text Input Allow Only Integer Input in Angularjs

Get a List of Dates Between Two Dates Using JavaScript

How to Convert Image to Byte Array Using JavaScript Only to Store Image on SQL Server

How to Check If a Background Image Is Loaded

How to Check If Value Is in Array With Angularjs

How to Remove Row Borders in a Specific Column

Get Start Date and End Date of Current Week (Week Start from Monday and End With Sunday )

How to Highlight a Part of Text in Textarea

How to Load Script in React Component

Laravel Reactjs:Changes Are Not Reflecting After Change in My Js(Reactjs) File

Export Method/Function in React Native

Invalid Configuration Object in Webpack

React | How to Add Dynamic New Divs Like Rows

How to Make Any Hovered Color Darker/Lighter That the Original

Prevent Bootstrap Modal Window from Closing on Form Submission

Google Charts - Labels Are Not Showing

Javascript (+) Sign Concatenates Instead of Giving Sum of Variables


Leave a reply



Submit