依赖输入

【问题标题】：Dependent input依赖输入
【发布时间】：2021-04-18 09:12:25
【问题描述】：

我想要一个依赖的数字输入。

此数字输入取决于一个选择框，该选择框通过选择每个选项为输入创建特定的数字范围。

例如：

如果我们选择option2，则数字输入将为min = 20和max = 50!，
如果我们选择option3，数字输入将是min = 10和max = 30!。

如何创建这样的功能？

这是我尝试过的：

      <form>
    <select id="selbox">
      <option value="option1">option1</option>
      <option value="option2">option2</option>
     <option value="option3">option3</option>
</select>

   <input type="number" id="num">
<button>click</button>
</form>

【问题讨论】：

标签： javascript html jquery json

【解决方案1】：

您可以使用javascript修改数字输入的最小值和最大值。

const num = document.querySelector("#num");
const selbox = document.querySelector("#selbox");

const range = {
  option1: [100, 120],
  option2: [20, 50],
  option3: [10, 30]
};

// Setting Initial Range Value
num.min = range['option1'][0];
num.max = range['option1'][1];

// Setting Range Value On Change
selbox.addEventListener("change", () => {
  num.min = range[selbox.value][0];
  num.max = range[selbox.value][1];
});

<form>
  <select id="selbox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>

  <input type="number" id="num">
  <button>click</button>
</form>

【讨论】：