I was just wondering if there was a simple shortcut to add options to a dropdown menu for the numbers 1 to 100 instead of having to do the following:
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
etc. all the way to 100?
Thanks
Not with plain HTML I'm afraid.
You could use some jQuery to do this though:
$(function(){
var $select = $(".1-100");
for (i=1;i<=100;i++){
$select.append($('<option></option>').val(i).html(i))
}
});?
You can download jQuery here
Are you using JavaScript or jQuery besides the html? If you are, you can do something like:
HTML:
<select id='some_selector'></select>?
jQuery:
var select = '';
for (i=1;i<=100;i++){
select += '<option val=' + i + '>' + i + '</option>';
}
$('#some_selector').html(select);
As you can see here.
Another option for compatible browsers instead of select, you can use is HTML5's input type=number
:
<input type="number" min="1" max="100" value="1">
I see this is old but... I dont know if you are looking for code to generate the numbers/options every time its loaded or not. But I use an excel or open office calc page and place use the auto numbering all the time. It may look like this...
| <option>
| 1 | </option>
|
Then I highlight the cells in the row and drag them down until there are 100 or the number that I need. I now have code snippets that I just refer back to.
In Html5, you can now use
<form>
<input type="number" min="1" max="100">
</form>
As everyone else has said, there isn't one in html; however, you could use PUG/Jade. In fact I do this often.
It would look something like this:
select
- var i = 1
while i <= 100
option=i++
Not with pure HTML as far as I know.
But with JS or PHP or another scripting language such as JSP, you can do it very easily with a for loop.
Example in PHP:
<select>
<?php
for ($i=1; $i<=100; $i++)
{
?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}
?>
</select>
Jquery One-liners:
ES6 + jQuery:
$('#select').append([...Array(100).keys()].map((i,j) => `< option >${i}</option >`))
Lodash + jQuery:
$('#select').append(_.range(100).map(function(i,j){ return $('<option>',{text:i})}))
Source: Stackoverflow.com