# InputSetter > 原文：[https://docs.gitlab.com/ee/development/fe_guide/droplab/plugins/input_setter.html](https://docs.gitlab.com/ee/development/fe_guide/droplab/plugins/input_setter.html) * [Usage](#usage) # InputSetter[](#inputsetter "Permalink") `InputSetter`是一个插件，当单击列表项时，该插件允许在 droplab 范围之外更新 DOM. ## Usage[](#usage "Permalink") 将`InputSetter`对象添加到`DropLab.prototype.init`或`DropLab.prototype.addHook`调用的插件数组中. * `InputSetter`需要`input`和`valueAttribute`的配置值. * `input`应该是要操作的 DOM 元素. * `valueAttribute`应该是一个字符串，它是列表项上属性的名称，用于获取用于更新`input`元素的值. 您还可以将`InputSetter`配置设置为对象数组，这将允许您更新多个元素. ``` <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', }]); ``` 上方，如果第二个列表项被单击，它将更新`#input`元素的`value` `1` ，还将更新`#div`元素的`data-selected-id`到`1` . （可选）您可以将`inputAttribute`设置为一个字符串，该字符串是您要更新的`input`元素上的属性的名称. 如果你不提供`inputAttribute` ， `InputSetter`将更新`value`的的`input` ，如果它是一个元素`INPUT`元素，或者`textContent`的的`input`因素，如果它不是一个`INPUT`元素.