web-dev-qa-db-ja.com

MDC Web：mdc-select変更時に非表示の入力値を更新（非ネイティブの選択ボックス）| JavaScript（JS）

これまでMDC Webコンポーネントでうまく機能してきましたが、私はここで長い間ハングアップしています。 （JSでは強くありません。）

mdc-selectは以前は非ネイティブでしたが、次にネイティブHTML selectを使用しましたが、今度は再び非ネイティブです。しばらくの間、MDC Webは非表示の入力をサポートしていたため、サーバーに値を渡すことができました。

ドキュメントはほとんどありません-ほとんどの場合、私のようなユーザーがGitHubで問題を開いているだけです。

Closed： MDC Select-no form input compatible＃2221

Closed： [MDC Select] Example in README does send send values to the web server＃5295

開く： [MDCSelect] HTMLフォームをサポートする非表示の入力要素を追加します＃5428

同じページの複数の選択ボックスのMDCSelect変更で非表示の入力の値を設定/更新する必要があります...選択ボックスは1つですが、複数ではありません。

選択ボックスの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、名前、さらにはクラスで非表示の入力をターゲットにしてみました。 forEach、またはループのような統合された関数が必要だと思います-無駄に各選択の下にJSを追加してみました。私は他のユーザーの例（下記参照）を使用しましたが、成功しませんでした。 JavaScriptは私のものではありません。何が起きているのかはわかっていますが、これを機能させるための関数やループ構文などはわかりません。

各セット/更新がその特定の選択ボックスに関連付けられた正しい非表示の入力をターゲットにしていることを確認する必要があります。

以下は、1つの選択ボックスで機能するが複数では機能しない私のJSです。

// 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;
});

});

以下は、他の人が使用したコードのうち、変更/適用できなかったものです（上記のリンクから取得）。

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;
            }
        } );
    }
} );

Daniel-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>

助けてください！この特定の問題は1月からオープンしており（以前から苦労している人々）、JS以外の開発者がMDCSelectボックスを実装するのに役立つ明確な解決策はありません。前もって感謝します！

javascriptformsmaterial-designmdc-components
2
JDizzle

問題はここにあります：

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

Document.querySelector は、ドキュメント全体で最初に一致する要素を検索するため、ループでは常に同じドキュメントにアクセスしますinput要素。

代わりに、各非表示入力の親要素に対して querySelector メソッドを実行する必要があります。これは、ループでは次のようになります。

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