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

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>

选择菜单是一个Material Design组件，可以在这里找到相关描述。

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

- user3248346

Answer 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>

- user17573336

Answer 2

Create a hidden input:

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

- Triby

---

似乎 MDC 选择组件的工作方式与浏览器本地选择不同。因此，您的解决方案可能是正确的方法。 - user3248346

MDC选择组件不是一个输入组件，但它会将其值保存在实例化元素的value属性中，因此这应该可以工作。 - Triby

是的，它确实可以工作，但看起来像是一个hack。他们本可以设计组件与浏览器的原生选择器一起使用。不确定为什么他们没有这样做。 - user3248346

MDCSelect本身就是一个大的hack，因为没有浏览器本地的方法来创建一个漂亮的样式化选择器，但是，如果不需要额外的代码就能实现这种行为，那将是非常好的。 - Triby