Easy Multiselect Combo Box With Checkboxes – MSFmultiSelect

Preview:

Description:

The MSFmultiSelect JavaScript library converts the regular select element into an advanced user-friendly multiselect combo box.

Click on the box to select multiple items from a popup containing a list of options with checkboxes.

Also provides a Check All option that allows you to select all options with a single click.

How to use it:

1. Add references to MSFmultiSelect’s JavaScript and Stylesheet.

<link rel="stylesheet" href="MSFmultiSelect.css" />
<script src="MSFmultiSelect.js"></script>

2. Wrap your select box into a container element.

<div id="example">
  <select id="multiselect"  class="form-control" name="languages[]" multiple="multiple">
    <option value="1" selected>JavaScript</option>
    <option value="2">CSS</option>
    <option value="3" selected>HTML</option>
    <option value="4">Ruby</option>
    <option value="5">Go</option>
    <option value="6">PHP</option>
    <option value="7">ASP.Net</option>
    <option value="8">Java</option>         
  </select>
</div>

3. Initialize the library on the top container and done.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      appendTo: '#example',
      // options here
    }
);

4. Determine whether to enable the Check All functionality.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      selectAll: true
    }
);

5. Specify the height/width of the multiselect combo box.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      width:350,
      height:30
    }
);

6. Add additional CSS classes to the multiselect combo box.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      className: ''
    }
);

7. Determine whether to enable the ReadOnly mode.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      readOnly: true
    }
);

8. Execute a function when the options are changed.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      onChange:function(checked,value,instance){
        console.log(checked,value,instance);
      }
    }
);

9. Determine whether to enable the Live Search functionality.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      searchBox: true
    }
);

10. Determine the theme you’d like to use.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      theme: 'theme1' // or 'theme2' (tags input)
    }
);

11. Set the placeholder.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      placeholder: ''
    }
);

12. Event handlers.

var mySelect = new MSFmultiSelect(
    document.querySelector('#multiselect'),
    {
      onChange:function(checked, value, instance) {
        console.log(checked, value, instance);
      },
      afterSelectAll: function(checked, values, instance) {
        console.log(checked, values, instance);
      },
    }
);

13. Possible API methods to control the multiselect combo box programmatically.

// set/remove value
mySelect.setValue(['4','8']);
mySelect.removeValue(['4','8']);
// get selected values
mySelect.getData();
// get an array of the current data
mySelect.getSource();
// select all values
mySelect.selectAll(true/false);
// load more options
mySelect.loadSource([
  {caption:'Option 1',value:'value1',selected:true},
  {caption:'Option 2',value:'value2',selected:false},
]);
// reload the instance
mySelect.reload();

Changelog:

v2.5 (06/24/2023)

• update

v2.4 (07/14/2021)

• selectAll checkbox behavior bug fixed

v2.3 (07/09/2021)

• Search bug fixed.

v2.2 (07/08/2021)

• Close button click callback event bug fixed
• sellectAll(false) execute dialog box open bug fixed

v2.1 (05/05/2021)

• Update

v2 (12/10/2020)

• Two different themes
• Search box feature
• After Select all event