在选择菜单中选择的值未发送到服务器

Question

（后端开发者在这里尝试做一些前端开发）

我有一个简单的 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>

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

我与该组件关联的 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 属性吗？

Answer 1

在附加信息部分的material documentation 中有一个新的更新。它建议做与接受的答案相同的事情，但不使用 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>

Answer 2

创建隐藏输入：

<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;
});