输入和选项答案

【问题标题】：Input and options输入和选项
【发布时间】：2021-04-16 22:13:47
【问题描述】：

朋友们好，我想根据标签为输入类型一创建一个特殊的数字范围。也就是说，通过选择任何选项，这个数值范围都会改变！例如，如果您选择选项 2，则输入中的 min = 10 和 max = 25。而如果您选择选项 3，则输入中的最小值 = 5，最大值为 45。这样的事情可能吗？怎么可能这样。是借助 js 还是 php 创建的功能？

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

<input type="number"name ="num"id="num">

【问题讨论】：

如果你想让这立即发生，它必须在 JavaScript 中完成。 PHP 在表单提交之前不会运行，因此它不能更改客户端属性。
是的，我们可以用 JS 做到这一点，PHP 是服务器端的。检查change 事件：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…。你需要知道什么是选择器以及如何使用它（这里的例子：w3schools.com/w3js/w3js_selectors.asp）。

标签： javascript php jquery json

【解决方案1】：

您标记了JQuery，所以我将对此进行回答，但这是dynamic frontend 的一个非常基本的用例，所以我将直接对其进行编码。基本流程是选择一个选项触发变量的更改，然后反映在输入元素上。这种数据变化通常称为应用程序的state 或client-side state。

无论如何，将 onChange 回调附加到 select，然后设置输入的值。类似的东西

$("select").change(function (e){ 
...set the variable here...
...set range for the input here...
})

【讨论】：

【解决方案2】：

使用与<select> 的值具有相同键的对象。然后您可以简单地在更改事件侦听器中引用特定范围并设置适当的最小值/最大值

const ranges = {
  option1: {min: 10, max: 25}, 
  option2: {min: 5, max: 30},
  option3: {min: 100, max: 200}
}

document.getElementById('selbox').addEventListener('click', function(e){
   const {min, max} = ranges[this.value],
         input = document.getElementById('num');
   input.value ='';
   input.min = min;
   input.max = max;
});

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

<input type="number" name="num" id="num">

【讨论】：

【解决方案3】：

您可以在输入上使用 JavaScript 设置最小值和最大值。

您需要做的是监听选择的变化，并根据该值设置最小值和最大值。

https://www.w3schools.com/jsref/prop_number_min.asp
https://www.w3schools.com/jsref/prop_number_max.asp
https://www.w3schools.com/jsref/event_onchange.asp

【讨论】：

不要将链接放在代码块中，它们不可点击。