为了账号安全,请及时绑定邮箱和手机立即绑定

MDC Web:mdc-select 在更改时更新隐藏的输入值(非本机选择框)

MDC Web:mdc-select 在更改时更新隐藏的输入值(非本机选择框)

慕丝7291255 2022-07-01 16:54:01
到目前为止,在 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;


查看完整回答
反对 回复 2022-07-01
  • 1 回答
  • 0 关注
  • 171 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号