InputSetter
InputSetter
is a plugin that allows for updating DOM out of the scope of droplab when a list item is clicked.
Usage
Add the InputSetter
object to the plugins array of a DropLab.prototype.init
or DropLab.prototype.addHook
call.
-
InputSetter
requires a config value forinput
andvalueAttribute
. -
input
should be the DOM element that you want to manipulate. -
valueAttribute
should be a string that is the name of an attribute on your list items that is used to get the value to update theinput
element with.
You can also set the InputSetter
config to an array of objects, which will allow you to update multiple elements.
<input id="input" value="">
<div id="div" data-selected-id=""></div>
<input href="#" id="trigger" data-dropdown-trigger="#list">
<ul id="list" data-dropdown data-dynamic>
<li><a href="#" data-id="{{id}}">{{text}}</a></li>
<ul>
const droplab = new DropLab();
const trigger = document.getElementById('trigger');
const list = document.getElementById('list');
const input = document.getElementById('input');
const div = document.getElementById('div');
droplab.init(trigger, list, [InputSetter], {
InputSetter: [{
input: input,
valueAttribute: 'data-id',
} {
input: div,
valueAttribute: 'data-id',
inputAttribute: 'data-selected-id',
}],
});
droplab.addData('trigger', [{
id: 0,
text: 'Jacob',
}, {
id: 1,
text: 'Jeff',
}]);
Above, if the second list item was clicked, it would update the #input
element
to have a value
of 1
, it would also update the #div
element’s data-selected-id
to 1
.
Optionally you can set inputAttribute
to a string that is the name of an attribute on your input
element that you want to update.
If you do not provide an inputAttribute
, InputSetter
will update the value
of the input
element if it is an INPUT
element,
or the textContent
of the input
element if it is not an INPUT
element.
Help and feedback
If there's something you don't like about this feature
To propose functionality that GitLab does not yet offer
To further help GitLab in shaping new features
If you didn't find what you were looking for
If you want help with something very specific to your use case, and can use some community support
POST ON GITLAB FORUM
If you have problems setting up or using this feature (depending on your GitLab subscription)
REQUEST SUPPORT
To view all GitLab tiers and features or to upgrade
If you want to try all features available in GitLab.com
If you want to try all features available in GitLab self-managed
If you spot an error or a need for improvement and would like to fix it yourself in a merge request
EDIT THIS PAGE
If you would like to suggest an improvement to this doc