Как написать HTML? [зависимый раскрывающийся список с использованием компонентов дизайна материала] - PullRequest
Новая
       5

Как написать HTML? [зависимый раскрывающийся список с использованием компонентов дизайна материала]

1 голос
/ 25 января 2020

Я новичок в кодировании. Я хотел бы создать зависимый выпадающий список, используя Компоненты дизайна материала.

Я прочитал официальное руководство здесь. https://material.io/develop/web/components/input-controls/select-menus/

Однако я не смог найти, как написать html.

Это оригинальный файл html, который я написал. 

<div class="pulldownset">

    <!-- ========================================== -->
    <select class="mainselect" name="language">
       <option value="">language</option>
       <option value="en-US">US</option>
       <option value="en-GB">GB</option>
    </select>

    <!-- ================================================================ -->
    <select id="en-US" class="subbox" name="voiceId[]">
       <option value="">voice</option>
       <option value="en-US-Wavenet-A">en-US-Wavenet-A</option>
       <option value="en-US-Wavenet-B">en-US-Wavenet-B</option>
    </select>

    <!-- ================================================================ -->
    <select id="en-GB" class="subbox" name="voiceId[]">
       <option value="">en-GB</option>
       <option value="en-GB-Wavenet-A">en-GB-Wavenet-A</option>
       <option value="en-GB-Wavenet-B">en-GB-Wavenet-B</option>
    </select>

 </div>

Я прочитал https://material.io/develop/web/components/input-controls/select-menus/ и попытался написать новый файл html, но не смог.

У меня возникли вопросы.

Отличается ли "data-value" от "name"? Компоненты дизайна материала не имеют и, не так ли? 

<div class="mdc-select">
      <div class="mdc-select__anchor demo-width-class">
        <i class="mdc-select__dropdown-icon"></i>
        <div class="mdc-select__selected-text"></div>
        <span class="mdc-floating-label">language</span>
        <div class="mdc-line-ripple"></div>
      </div>

      <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
        <ul class="mdc-list">
          <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
          <li class="mdc-list-item" data-value="en-US">
            en-US
          </li>
          <li class="mdc-list-item" data-value="en-GB">
            en-GB
          </li>
        </ul>
      </div>
    </div>

Я искал в Inte rnet «зависимый выпадающий список с использованием компонентов дизайна материала». Однако я не мог получить ответ. Я упускаю суть?

Не могли бы вы дать мне какую-либо информацию или предложение?

Заранее спасибо.

С уважением, Казу

...