THEMETRIAL

Easy Multiselect Combo Box With Checkboxes – MSFmultiSelect

Author:jagadeesanjd11
Views Total:11 views
Official Page:Go to website
Last Update:May 5, 2021
License:MIT

Preview:

Easy Multiselect Combo Box With Checkboxes – MSFmultiSelect

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="https://www.cssscript.com/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.1 (05/05/2021)

v2 (12/10/2020)

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

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.