Действительно ли HTML иметь кнопку в списке выбора? - PullRequest
Новая
       7

Действительно ли HTML иметь кнопку в списке выбора?

0 голосов
/ 05 февраля 2020

Мне нужно составить select список языков для сайта. Выбор варианта переведет сайт. Это не сложно кодировать, но мне интересно, какова правильная разметка, особенно с учетом доступности.

Будет ли это нормально: 

<select>
  <option>
    <a role="button">
      English
    </a>
  </option>
  <option>
    <a role="button">
      French
    </a>
  </option>
  <option>
    <a role="button">
      Italian
    </a>
  </option>
</select>

ОБНОВЛЕНИЕ Чтобы уточнить мои требования. Мне нужно что-то похожее на список выбора - так что пока вы не нажмете на него, будет видна только 1 опция. Я мог бы просто использовать ul и стилизовать его с помощью CSS, но тогда я скрываю другие опции, и мне нужно создать какой-то модал, поэтому я надеялся, что есть простой способ. У вас также не будет приятной встроенной обработки списков выбора на мобильных устройствах.

Я сделал демо-версию, показывающую, как UX-идентификатор хочет достичь:

https://codepen.io/_j_i_m_fb_/pen/gOpOYGV 

<select>
  <option>English</option>
  <option>French</option>
</select>

const SELECT = document.querySelector('select');

const changeLanguage = language => {
  console.log('Language is now ', language)
}

SELECT.addEventListener('change', (e) => changeLanguage(e.target.value));

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Нет, это не так.

Ошибка: начальный тэг a.

- https://validator.nu/

Если вам нужен список кнопок, тогда используйте список (<ul>) кнопок (<button>), но если вам нужен список ссылок (и это обычно для переключения языка, связавшись с другой страницей в другой язык), затем используйте ссылку (<a href="this-page-in-french.html" hreflang="fr">), а не кнопку.

0 голосов
/ 05 февраля 2020

Это неверно HTML. Наиболее распространенный подход для этого заключался в кодировании select, например: 

<select id="country" name="country">
    <option value="English">English</option>
    <!-- some more options -->
</select>

и обеспечении того, что этот select невидим. Затем вы можете закодировать некоторый шаблон HTML, который выглядит как select и после выполнения некоторых действий пользователя над элементами, onclick или обработчик щелчков будет выглядеть примерно так: 

document.getElementById("country").val(this.innerText);

Пример: 

<div onclick='document.getElementById("country").val(this.innerText);'>English</div>
...