597.md

# 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`元素.