Improved versions of classic select inputs.
<infor-select-search id="search" name="search" 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><infor-select-multiple id="multiple" name="multiple" 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><infor-select-edit id="edit" name="edit" class="form-control rounded-pill" placeholder="Selecteer status">
<infor-select-option data-value="actielijst" >Actielijst</infor-select-option>
<infor-select-option data-value="lopend">Lopend</infor-select-option>
</infor-select-edit>| Attribute | Description | Select | Multiple | Edit |
|---|---|---|---|---|
| id | Instance identifier | X | X | X |
| name | Input name attribute | X | X | X |
| placeholder | Input placeholder attribute | X | X | X |
| class | Input styling classes | X | X | X |
| data-value | Prefill a value | X | ||
| data-disable | Disables the input | x | x | X |
| data-livewire | Trigger Livewire.emit on change | X | X | X |
| data-livewire-params | Optional additional livewire.emit params, syntax: data-livewire-params=":id=5 :name=TEST" |
X | X | X |
| option data-name | Name that will be display on select | X | X | |
| option data-value | Value that will posted | X | X | X |
| option data-selected | Pre-selects an option | X | X | |
| option data-params | Appends data elements to the option html element, syntax: data-params=":proces=1" |
X | X | X |
| option data-locked | Locks the option in the current state | X |
Place this div inside <infor-select-search>, the content will be appended to the action button
<infor-select-action> <div onclick="alert('test')" >Action Example</div> </infor-select-action>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>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 |
| addValue() | options: object (name*, value*, html, params) |
Appends a new value to the select |
| enable() | Enables the input | |
| disable() | Disables the input | |
| clear() | Clears the input |
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 |
| addValue() | options: object (name*, value*, html, params, locked, selected) |
Appends a new value to the select. |
| enable() | Enables the input | |
| disable() | Disables the input | |
| clear() | Clears the input |
Use _inforSelectMultiple.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 |
| addValue() | options: object (value*, html, params) |
Appends a new value to the select. |
| enable() | Enables the input | |
| disable() | Disables the input | |
| clear() | Clears the input |