Значение, выбранное в меню выбора, не отправляется на сервер

(Бэкэнд-разработчик пытается сделать здесь некоторую разработку интерфейса)

У меня есть простая HTML-форма с некоторыми входными текстовыми полями и меню выбора. Когда форма отправлена, я вижу, что значения текстового поля попадают на веб-сервер, но я не вижу значения для меню выбора, поражающего сервер. Код для меню выбора:

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

javascript html mdc-components
person M.K.    schedule 02.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Создайте скрытый ввод:

<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;
});
person Triby    schedule 03.12.2019
comment
Кажется, что компонент выбора MDC не работает так же, как собственный выбор браузера. Так что ваше решение, вероятно, путь. - person M.K.; 03.12.2019
comment
Компонент выбора MDC не является входом, но сохраняет свое значение в свойстве value экземпляра элемента, поэтому это должно работать. - person Triby; 03.12.2019
comment
Да, это работает, но похоже на взлом. Они могли бы каким-то образом спроектировать компонент для работы с собственным выбором браузера. Непонятно, почему они этого не сделали - person M.K.; 03.12.2019
comment
MDCSelect сам по себе является большим хаком, потому что в браузере нет встроенного способа сделать хороший стилизованный выбор, но да, было бы неплохо иметь такое поведение без дополнительного кода. - person Triby; 03.12.2019