HTML 在 select 列表中有一个按钮是否有效？

Question

我需要为网站制作一个 select 语言列表。选择一个选项将翻译网站。这并不难编码，但我想知道什么是正确的标记，尤其是考虑到可访问性。

这样可以吗：

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

更新澄清我的要求。我需要一些看起来像 select 列表的东西 - 所以只有 1 个选项是可见的，直到你点击它。我可以只使用 ul 并使用 CSS 设置样式，但随后我隐藏了其他选项并且我必须创建某种模态，所以我希望有一种简单的方法。您也不会在移动设备上很好地原生处理 select 列表。

我制作了一个演示，展示了想要实现的 UX id：

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

Answer 1

不，不是。

Error: Stray start tag a.

— https://validator.nu/

如果您想要一个按钮列表，则使用一个按钮列表 (<ul>) (<button>)，但是如果您想要一个 link 列表（并且它通常通过 link 切换到不同语言的另一个页面来实现语言切换器）然后使用 link (<a href="this-page-in-french.html" hreflang="fr">) 而不是按钮。

Answer 2

那是无效的 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>

HTML 在 select 列表中有一个按钮是否有效？

Is it valid HTML to have a button within a select list?

html

user-experience