到目前为止,在 MDC Web Components 方面做得很好,但我已经在这里挂了太久了。(在 JS 中不强。)mdc-select 曾经是非本地的,然后使用本地 HTML 选择,现在它又是非本地的。有一段时间,MDC Web 支持隐藏输入,以便您可以将值传递给服务器。我需要为同一页面上的多个选择框设置/更新 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、name 甚至类来定位隐藏的输入。我想我需要某种集成功能,forEach 或循环 - 尝试在每个选择下添加 JS 无济于事。我已经处理了其他用户的示例(见下文),但没有成功。JavaScript 不是我的事,我知道它应该发生什么,但不知道函数或循环语法等来完成这项工作。我需要确保每个设置/更新都针对与该特定选择框关联的正确隐藏输入。请帮忙!这个特殊问题自 1 月份以来一直存在(人们很久以前就在苦苦挣扎),没有明确的解决方案来帮助非 JS 开发人员实现 MDCSelect 框。提前致谢!
1 回答

长风秋雁
TA贡献1757条经验 获得超7个赞
问题在这里:
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/150
提交
取消