InforSelectables

Improved versions of classic select inputs.


InforSelectables@1.1.5.css
selectables.css

- 2024-03-13 09:00:12: Table responsibility

InforSelectables@1.1.5-min.css
selectables.css

- 2024-03-13 09:00:12: Table responsibility

InforSelectables@1.1.5.js
selectables.js

- 2024-03-13 09:00:12: Table responsibility

InforSelectables@1.1.5-min.js
selectables.js

- 2024-03-13 09:00:12: Table responsibility

InforSelectables@1.1.3.css
selectables.css

- 2024-01-26 08:51:59: +onchangeOption

InforSelectables@1.1.3-min.css
selectables.css

- 2024-01-26 08:51:59: +onchangeOption

InforSelectables@1.1.3.js
selectables.js

- 2024-01-26 08:51:59: +onchangeOption

InforSelectables@1.1.3-min.js
selectables.js

- 2024-01-26 08:51:59: +onchangeOption

InforSelectables@1.1.0.css
selectables.css

- 2024-01-04 08:49:32: +livewire-params

InforSelectables@1.1.0-min.css
selectables.css

- 2024-01-04 08:49:32: +livewire-params

InforSelectables@1.1.0.js
selectables.js

- 2024-01-04 08:49:32: +livewire-params

InforSelectables@1.1.0-min.js
selectables.js

- 2024-01-04 08:49:32: +livewire-params

InforSelectables@1.0.11-min.css
selectables.css

- 2023-12-01 12:22:05: Init data-clear on load

InforSelectables@1.0.11.js
selectables.js

- 2023-12-01 12:22:05: Init data-clear on load

InforSelectables@1.0.11-min.js
selectables.js

- 2023-12-01 12:22:05: Init data-clear on load

InforSelectables@1.0.11.css
selectables.css

- 2023-12-01 12:22:04: Init data-clear on load

InforSelectables@1.0.10.css
selectables.css

- 2023-11-08 08:07:03: CSS

InforSelectables@1.0.10-min.css
selectables.css

- 2023-11-08 08:07:03: CSS

InforSelectables@1.0.10.js
selectables.js

- 2023-11-08 08:07:03: CSS

InforSelectables@1.0.10-min.js
selectables.js

- 2023-11-08 08:07:03: CSS

InforSelectables@1.0.9.css
selectables.css

- 2023-10-23 14:21:43: SelectMultiple -> +livewire

InforSelectables@1.0.9-min.css
selectables.css

- 2023-10-23 14:21:43: SelectMultiple -> +livewire

InforSelectables@1.0.9.js
selectables.js

- 2023-10-23 14:21:43: SelectMultiple -> +livewire

InforSelectables@1.0.9-min.js
selectables.js

- 2023-10-23 14:21:43: SelectMultiple -> +livewire

InforSelectables@1.0.8.css
selectables.css

- 2023-10-23 12:07:05: Livewire.emit data attribute

InforSelectables@1.0.8-min.css
selectables.css

- 2023-10-23 12:07:05: Livewire.emit data attribute

InforSelectables@1.0.8.js
selectables.js

- 2023-10-23 12:07:05: Livewire.emit data attribute

InforSelectables@1.0.8-min.js
selectables.js

- 2023-10-23 12:07:05: Livewire.emit data attribute

InforSelectables@1.0.7.css
selectables.css

- 2023-10-23 08:39:17: Removed console.log

InforSelectables@1.0.7-min.css
selectables.css

- 2023-10-23 08:39:17: Removed console.log

InforSelectables@1.0.7.js
selectables.js

- 2023-10-23 08:39:17: Removed console.log

InforSelectables@1.0.7-min.js
selectables.js

- 2023-10-23 08:39:17: Removed console.log

InforSelectables@1.0.1.css
selectables.css

- 2023-10-11 13:09:08: -Search -> +Clear button -Search -> Code optimalization

InforSelectables@1.0.1-min.css
selectables.css

- 2023-10-11 13:09:08: -Search -> +Clear button -Search -> Code optimalization

InforSelectables@1.0.1.js
selectables.js

- 2023-10-11 13:09:08: -Search -> +Clear button -Search -> Code optimalization

InforSelectables@1.0.1-min.js
selectables.js

- 2023-10-11 13:09:08: -Search -> +Clear button -Search -> Code optimalization


Dependencies:
Geen dependencies gevonden

README

HTML

Select Search

<infor-select-search id="status" name="status" class="form-control" placeholder="Selecteer status">
    <infor-select-option data-name="Actielijst" data-value="actielijst" data-selected>Actielijst</infor-select-option>
    <infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
</infor-select-search>

Select Multiple

<infor-select-multiple id="gebruikers" name="gebruikers" class="form-control" placeholder="Selecteer status">
    <infor-select-option data-name="Actielijst" data-value="actielijst">Actielijst</infor-select-option>
    <infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
</infor-select-multiple>

Options

Attribute Description Default
id Instance identifier Random string
name Input name attribute
placeholder Input placeholder attribute
class Input styling classes
data-name Name that will be display on select
data-value Value that will posted
data-selected Pre-selects an option
data-livewire Trigger Livewire.emit on change
data-livewire-params Optional additional livewire.emit params. Format = ":id=5 :name=TEST"

Additional hidden input attributes

Place this div inside <infor-select-search>, all attributes will be appended to the hidden input

<infor-select-search-hidden-attr wire:model="role"></infor-select-search-hidden-attr>

Instance

Select Search

Use _inforSelectSearch.get(id) to get the instance

Variable Parameters Description
onchange() value: string/int Triggers on change with selected value as parameter, can be changed like this instance.onchange = value => { console.log(value) }
getValue() Returns currently selected value: {name: "Displayed name", value: "Hidden value"}
setValue() value: string/int Sets values based on the provided parameter

Select Multiple

Use _inforSelectMultiple.get(id) to get the instance

Variable Parameters Description
onchange() values: object[] Triggers on change with selected values as parameter, can be changed like this instance.onchange = values => { console.log(values) }
onchangeOption() value: object Triggers on change with selected value as parameter, can be changed like this instance.onchangeOption = value => { console.log(value) }
getValues() Returns currently selected options in an array: [{name: "Actielijst", value: "actielijst"}]
setValues() values: array, deselect: boolean Sets values based on the provided array. Deselects not included options based on deselect parameter, deselects by default