Input And Options

Hello friends I want to create a special numeric range for the input type number one, depending on the tag. That is, by selecting any of the options, this numerical range will chan

Solution 1:

You tagged JQuery, so I'll gear my answer towards that, but this is a pretty basic use case of a dynamic frontend so I'm going to outright code it. The basic flow for this is to have selecting an option trigger the change of a variable, which is then reflected on the input element. That change in data is normally referred to as the state or client-side state of the app.

Anyways, attach an onChange callback to the select, then set the value for the input. Something like

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

Solution 2:

Use an object with same keys as the values of your <select>. Then you can reference the particular range simply in a change event listener and set the appropriate min/max

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

<selectid="selbox"><optionvalue="option1">option1</option><optionvalue="option2">option2</option><optionvalue="option3">option3</option></select><inputtype="number"name="num"id="num">

Solution 3:

You can set a min and max with JavaScript on the input.

What you have to do is to listen for change on the select and depending on that value you will set the min and max values.

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