Bootstrap Multiselect showing 0 selected even if i select multiple values

Question

When I select multiple values it is showing 0 selected in the label. I think there is something wrong with the Javascript. Take a look at this image: https://photos.app.goo.gl/5Dxwt5gvuE277Uyw9

I also want to store all the values in my database. Should I store all the values in an array and then pass it to PHP?

 $(document).ready(function() { $("#multifield1 option:selected").each(function() { console.log(this.text); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"> <div class="col-lg-6"> <div class="form-group"> <strong>Area of Interest:</strong> <select id="multifield1" class="multiselect-ui form-control" multiple="multiple"> <option value="X">X</option> <option value="Y">Y</option> <option value="Z">Z</option> </select> </div> </div>

Answer 1

You need to use onChange event handler:

 $('#multifield1').multiselect({ onChange: function(option, checked) { var selectedItems = $("#multifield1 option:selected").length; console.log('selected items: ' + selectedItems); } }); $('button.btn.btn-info').on('click', function(e) { var selectedItems = $("#multifield1 option:selected").length; console.log('Info btn: selected items: ' + selectedItems); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"> <button type="button" class="btn btn-info">Info</button> <div class="col-lg-6"> <div class="form-group"> <strong>Area of Interest:</strong> <select id="multifield1" class="multiselect-ui form-control" multiple="multiple"> <option value="X">X</option> <option value="Y">Y</option> <option value="Z">Z</option> </select> </div> </div>

Answer 2

This code is placed in your $(document).ready event handler, meaning it will only execute when the page is first loaded. And I assume that initially on page load, nothing is selected yet.

You could listen for the select's onchange event and use your code inside the handler, so that the code runs every time the select values are changed.

$(document).ready(function() {

    $("#multifield1").on("change", function() {
      $(this).find("option:selected").each(function() {
        console.log(this.text);
      });
    })

});

Answer 3

To send values in an array to PHP you should set "name" attribute of your select tag like this:

<select name="test[]" id="multifield1" class="multiselect-ui form-control" multiple="multiple">

Also, don't forget to make your form in a tag and add a submit button.