选择具有最大值的选项

Question

我想将选择选项设置为输入的方式。

在输入标签中，我们可以这样做：

  <input type="number" max="100" min="0"/>

现在我想在选择选项中执行此操作：

  <select>
      <option max="100" value="100">100</option>
      <option max="200" value="200">200</option>
  <select>

原因是我只想确保用户选择的值是否适合作为实际值。

Answer 1

我不

完全明白你在问什么，但我假设你在问是否有使用select的替代方案。

如果您希望允许用户选择一系列数字（例如 100-200），您可以选择使用 Html 滑块。有很多简单的教程可以教你如何使用滑块。

HTML5 滑块教程的示例。

否则，如果您想要一个固定值（例如 100 或 200），select选项将正常工作。

Answer 2

我找到检查所选选项是否正确的方法，以防模板中并非每个选项都正确。您必须使用 CustomValidity，如下所示：

<select id="select">
   <option value="100">100</option>
   <option value="200">200</option>
<select>

但是，由于某种原因，现在只有 100 个是有效的

let select = document.querySelector('#select');
let setSelectValidity = function () {
      if (select.value !== 100) {
          select.setCustomValidity('The only 100 is available');
      else {
          select.setCustomValidity('');
    }
}
select.addEventListener('change', setSelectValidity);