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 |
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 |
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 |
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 |
enable() | Enables the input | |
disable() | Disables the input | |
clear() | Clears the input |