Skip to content

Latest commit

 

History

History
107 lines (78 loc) · 3.28 KB

README.md

File metadata and controls

107 lines (78 loc) · 3.28 KB

Multi Checkbox Select

A library for the <select> tag in HTML, with checkboxes in <select multiple> dropdown

Installation

Put the multiCheckboxSelect.js and multi-checkbox-select.css files in your project and link them

Usage

Initialization

JS

multiCheckboxSelect('#selectTag')

or

var options = { 
      placeholder: 'Select States',
      entryName: 'State',
      data: ['option1', 'option2'],
}

multiCheckboxSelect('#selectTagMultiple', options)

For jQuery

$('#selectTag').multiCheckboxSelect()

or

var options = { 
      placeholder: 'Select States',
      entryName: 'State',
      data: ['option1', 'option2'],
}

$('#selectTag').multiCheckboxSelect(options)

If the select tag has multiple attribute or the multiple: true option, it will act as a multi checkbox select.

If we want custom value for each select dropdown item, then

options ={
      ...,
      data: [{value: '1', text:'myText'}]
}

You can also combine data whose value and innerHTML defaults to the string provided and different value with different innerHTML

options ={
      ...,
      data: [{value: '1', text:'myText'}, 'option2']
}

You can also set children (other instances of multiCheckboxSelect) that will clear if the parent element is cleared, either by pressing the x on the input field or by calling the clear() method in jQuery

HTML

<select id="selectTagMultiple" multiple>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
</select>

<select id="selectTag">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
 </select>

If a placeholder attr is given as data-placeholder="my placeholder", it will override the placeholder placed during initialization of the multiCheckboxSelect instance

Methods

Returns Method Parameter Description
void appendData(data) Array Appends data to the current multi checkbox select instance.
void initializeData(data) Array Removes all current data from the multiselect object and initializes with the passed dataset.
void addChild(multicheckboxSelectInstance) multiCheckboxSelect Adds a child to this multicheckboxselect instance. Fires a new 'clear' event
void clear() void Clears all the selections of the multiCheckboxSelect instance

Options

  • placeholder: 'Select country' - Placeholder of the input field

  • data: ['data1', 'data2', {value: '3', text: 'data3'}] - Append additional data-options to the select tag. You can pass an object with value and text which will reflect in the select tag's value and innerHTML.

  • multiple: true || false - State whether it will be a multi checkbox select or a normal dropdown

  • entryName: "State" - This will render Selected # State(s) when selecting with multi checkbox select

License

MIT