Select option with max value? - html

Question

I want to set the select option as how the input is.
In input tag we can do this:
<input type="number" max="100" min="0"/>
And now I want to do this in select option:
<select>
<option max="100" value="100">100</option>
<option max="200" value="200">200</option>
<select>
The reason is I just want to ensure if the value which is selected by user is appropriate as real value.

Answer 1

I don't fully understand what you are asking, but I'm going to assume you are asking whether there are alternatives to using select.
If you are looking to allow users to select a range of numbers (eg. 100-200), you can choose to use a Html Slider Bar. There are plenty of simple tutorials out there that teaches you how to use a slider bar.
An example of a HTML5 Slider Bar Tutorial.
Otherwise, if you want a fixed value (eg. 100 OR 200), a select option will work perfectly fine.

Answer 2

I find the way to check is the selected option correct in case when not every options in the template are corrects.
You have to use CustomValidity, like this:
<select id="select">
<option value="100">100</option>
<option value="200">200</option>
<select>
But, because of some reason now the only 100 is valid
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);