（后端开发人员试图在此处进行一些前端开发）

我有一个简单的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属性吗？