InputSetter · Gitlab 中文文檔

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