MDC Web:mdc-select更改时更新隐藏的输入值(非本地选择框)| JavaScript(JS)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MDC Web:mdc-select更改时更新隐藏的输入值(非本地选择框)| JavaScript(JS)相关的知识,希望对你有一定的参考价值。
到目前为止,在使用MDC Web组件方面表现不错,但是我在这里挂了太久了。 (在JS中不强。)
mdc-select以前是非本地的,然后使用了本地html选择,现在再次是非本地的。一段时间以来,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
我需要为同一页面上的多个选择框设置/更新MDCSelect更改上的隐藏输入的值 ...我可以将其用于一个选择框,但不能多个。
这里是选择框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不是我的事,我知道它应该发生的事情,但不知道执行此工作的功能或循环语法等。
我需要确保每个设置/更新都针对与该特定选择框相关的正确隐藏输入。
这是我的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;
});
});
这里有一些我无法修改/应用的代码(取自上面的链接):
从尼科洛夫-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框。预先感谢!
问题在这里:
document.querySelector('input.my_mdc-select__value').value = select.value;
document.querySelector将在整个文档中找到第一个元素。要解决您的问题,您应该仅在隐藏输入的父元素上运行querySelector方法,该元素在循环中将如下所示:
selectEl.querySelector('input.my_mdc-select__value').value = select.value;
以上是关于MDC Web:mdc-select更改时更新隐藏的输入值(非本地选择框)| JavaScript(JS)的主要内容,如果未能解决你的问题,请参考以下文章