简单的方法添加下拉菜单1 - 100而不做100个不同的选项？

Question

我只是想知道是否有一个简单的快捷方式可以在1到100的数字下拉菜单中添加选项，而不必执行以下操作：

<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>

等。一直到100？

由于

Answer 1

我不敢用简单的HTML。

你可以使用一些jQuery来做到这一点：

$(function(){
    var $select = $(".1-100");
    for (i=1;i<=100;i++){
        $select.append($('<option></option>').val(i).html(i))
    }
});​

<强> -- SEE DEMO --

您可以下载jQuery here

Answer 2

据我所知，不是纯HTML。

但是使用JS或PHP或其他脚本语言（例如JSP），您可以使用for循环轻松完成。

PHP中的示例：

<select>
<?php
    for ($i=1; $i<=100; $i++)
    {
        ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php
    }
?>
</select>

Answer 3

除了html，你使用的是JavaScript还是jQuery？如果你是，你可以做类似的事情：

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

尽可能see here。

兼容浏览器的另一种选择，而不是选择，您可以使用的是HTML5＆＃39; input type=number：

<input type="number" min="1" max="100" value="1">

Answer 4

在HTML5中，您现在可以使用

<form>
<input type="number" min="1" max="100">
</form>

Answer 5

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

Answer 6

正如其他人所说，html中没有一个;但是，您可以使用PUG/Jade。事实上，我经常这样做。

它看起来像这样：

select
  - var i = 1
  while i <= 100
    option=i++

这会产生：