输入和选择框

Question

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

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

例如：

如果我们选择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>

Answer 1

您可以在JavaScript中通过向select标记添加一个change EventListener来实现这一点，它将帮助您提取选定的范围值。然后将这些属性设置为输入的min和max属性。

null

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

select.addEventListener("change", setRangeForInput);

function setRangeForInput() {
  const [rangeMin, rangeMax] = select.value.split('-'); //this is ES6 destructuring syntax
  textBox.setAttribute("min", rangeMin);
  textBox.setAttribute("max", rangeMax);
}

html prettyprint-override"><form>
  <select id="selbox">
    <option value="20-40">option1</option>
    <option value="30-50">option2</option>
    <option value="3-7">option3</option>
  </select>

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