3

（后端开发人员试图在这里做一些前端开发）

我有一个简单的 HTML 表单，其中包含一些文本字段输入和一个选择菜单。提交表单后，我看到文本字段值到达 Web 服务器，但没有看到选择菜单的值到达服务器。选择菜单的代码是：

<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
  <i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
  <div class="mdc-select__anchor role-width-class">
    <i class="mdc-select__dropdown-icon"></i>
    <div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label id="roles-select-label" class="mdc-floating-label">Role</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <div class="mdc-select__menu mdc-menu mdc-menu-surface role">
    <ul class="mdc-list">
      <li class="mdc-list-item" data-value="0">
        Painter
      </li>
      <li class="mdc-list-item" data-value="1">
        Electrician
      </li>
      <li class="mdc-list-item" data-value="2">
        Decorator
      </li>
    </ul>
  </div>
</div>

选择菜单是一个材料设计组件，如所述处所述。

我与该组件关联的 Javascript 是：

mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));

const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));

role.listen('change', () => {
    alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});

我有几个问题直截了当：

  1. 我应该使用<li>而不是<option>- 上面的代码遵循网站上显示的示例。
  2. 应该有name属性吗？
4

2 回答 2

1

在附加信息部分的材料文档中有一个新的更新。它建议做与接受的答案相同的事情，但没有 JavaScript。

只是想把它放在那里，以供新人参考。

选择隐藏输入（用于 HTML 表单）

为了方便在 HTML 表单中提交 Select 的值，可以在根元素下添加一个隐藏的输入元素。该组件将其值与隐藏输入的值同步。

<div class="mdc-select mdc-select--filled demo-width-class">
  <div class="mdc-select__anchor">
    <!-- Rest of component omitted for brevity -->
  </div>
</div>
于 2021-12-02T16:27:40.253 回答
0

创建隐藏输入：

<input type="hidden" name="my_select" id="my_select" value="">

然后将值存储在那里：

mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));

const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));

role.listen('change', () => {
    document.getElementById('my_select').value = role.value;
});
于 2019-12-03T00:12:29.390 回答