До сих пор дела шли хорошо с веб-компонентами MD C, но я слишком долго зависал здесь. (Не сильный в JS.)
md c -выбор раньше был не нативным, затем использовал нативный HTML выбор, а теперь снова не нативный. Какое-то время MD C Web поддерживал скрытый ввод, чтобы вы могли передавать значения на сервер.
Документов почти нет - в основном, просто застрявшие пользователи, такие как я, открывают проблемы на GitHub:
Закрыт: MD C Выбор - больше не совместим с формой ввода # 2221
Закрыт: [MD C Выбор] Пример в README отправляет значения на веб-сервер # 5295
Открыть: [MDCSelect] Добавить скрытый элемент ввода для поддержки HTML форм # 5428
Мне нужно установить / обновить значение скрытого ввода в MDCSВыбор изменений для нескольких блоков выбора на одной странице ... Я могу сделать это для ОДНОГО блока выбора, но не для нескольких.
Вот поле выбора 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>
Я пытался нацелить скрытый ввод с помощью идентификатора, имени и даже класса. Я думаю, что мне нужна какая-то встроенная функция, forEach или l oop - попытался добавить JS под каждым выбором безрезультатно. Я работал с примерами (видно ниже) от других пользователей, но безуспешно. JavaScript это не мое, я знаю, что это должно происходить, но не знаю функцию или синтаксис l oop et c, чтобы заставить это работать.
Мне нужно убедиться, что каждый набор / обновление нацелен на правильный скрытый ввод, связанный с этим конкретным блоком выбора.
Вот мой 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>
Пожалуйста, помогите! Эта конкретная проблема была открыта с января (люди боролись задолго до этого) без четкого решения, чтобы помочь разработчикам, не являющимся JS, внедрить блоки MDCSelect. Заранее спасибо!