MDC Web：mdc-select 在更改时更新隐藏的输入值（非本地 select 框）| JavaScript (JS)

Question

到目前为止，MDC Web Components 的表现还不错，但我在这里停滞的时间太长了。（JS不强）

mdc-select以前是非原生的，后来用原生的HTMLselect，现在又是非原生的。有一段时间 MDC Web 支持隐藏输入，以便您可以将值传递给服务器。

几乎没有任何文档 - 大多数只是像我这样的用户在 GitHub:

上打开问题

关闭：MDC Select - no longer form input compatible #2221

关闭：[MDC Select] Example in README does send values to the web server #5295

打开：[MDCSelect] Add hidden input element to support HTML forms #5428

我需要 set/update MDCSelect 上隐藏输入的值更改同一页面上的多个 select 框...我可以得到它是为一个 select 盒子做的，而不是多个。

这是 select 框 HTML:

<div class="mdc-select mdc-select--outlined region-select">
  <div class="mdc-select__anchor demo-width-class">
    <i class="mdc-select__dropdown-icon"></i>
    <div id="demo-selected-text" class="mdc-select__selected-text" tabindex="0" aria-disabled="false" aria-expanded="false"></div>
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch" style="">
        <label id="outlined-label" class="mdc-floating-label" style="">Region</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
    <ul class="mdc-list">
      <li data-value="" disabled="" aria-selected="false" role="option" class="mdc-list-item" tabindex="0"></li>
      <li data-value="north" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">North</li>
      <li data-value="east" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">East</li>
      <li data-value="south" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">South</li>
      <li data-value="west" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">West</li>
    </ul>
  </div>
<!-- THIS IS THE HIDDEN INPUT THANK YOU -->
<input type="hidden" id="name2" name="input_name2" value="" class="my_mdc-select__value" />
</div>

我试过使用 id、名称甚至 class 来定位隐藏的输入。我想我需要某种集成函数、forEach 或循环 - 尝试在每个 select 下添加 JS 但无济于事。我已经使用其他用户的示例（见下文）但没有成功。 JavaScript 不是我的事，我知道它应该发生什么，但不知道函数或循环语法等来完成这项工作。

我需要确保每个 set/update 都针对与特定 select 框关联的正确隐藏输入。

这是我的 JS，适用于一个 select 框但不适用于多个框：

// Select Menu
import {MDCSelect} from '@material/select';

const selectElements = [].slice.call(document.querySelectorAll('.mdc-select'));

selectElements.forEach((selectEl) => {
  const select = new MDCSelect(selectEl);

 select.listen('MDCSelect:change', (el) => {
    const elText = el.target.querySelector(`[data-value="${select.value}"]`).innerText;

    console.log(`Selected option at index ${select.selectedIndex} with value "${select.value}" with a label of ${elText}`);

    // this works but only saves one
    document.querySelector('input.my_mdc-select__value').value = select.value;
});

});

这是其他人使用的一些代码，但我无法modify/apply（取自上面的链接）：

来自 nikolov-tmw:

document.querySelectorAll( '[data-mdc-auto-init="MDCSelect"]' ).forEach( function( sel ) {
    sel.My_MDCSelect__Value = sel.querySelector('input.my_mdc-select__value');
    if ( null !== sel.My_MDCSelect__Value ) {
        sel.addEventListener( 'MDCSelect:change', function( a ) {
            if ( sel.MDCSelect ) {
                sel.My_MDCSelect__Value.value = sel.MDCSelect.value;
            }
        } );
    }
} );

来自丹尼尔-DM：

<div class="mdc-select">
  ...
</div>
<input id="pet-select" type="hidden" name="pets">
<script>
  const input = document.querySelector('#pet-select');
  const select = document.querySelector('.mdc-select');
  select.addEventListener('MDCSelect:change', e => {
    input.value = e.detail.value;
  });
</script>

请帮忙！这个特殊问题自一月份以来就一直存在（人们很久以前就在苦苦挣扎），没有明确的解决方案来帮助非 JS 开发人员实现 MDCSelect 框。提前致谢！

Answer 1

问题出在这里：

document.querySelector('input.my_mdc-select__value').value = select.value;

Document.querySelector 将在 整个文档 中找到第一个匹配元素，因此在您的循环中您总是访问相同的 input 元素。

相反，您应该在每个隐藏输入的 父元素 上使用运行 querySelector 方法，这在您的循环中将如下所示：

selectEl.querySelector('input.my_mdc-select__value').value = select.value;

MDC Web：mdc-select 在更改时更新隐藏的输入值（非本地 select 框）| JavaScript (JS)

MDC Web: mdc-select update hidden input value on change (non-native select box) | JavaScript (JS)

javascript

forms

material-design

mdc-components