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

Easy way to add drop down menu with 1 - 100 without doing 100 different options?

提问by GibsonFX

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:

我只是想知道是否有一个简单的快捷方式可以将选项添加到数字 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>

etc. all the way to 100?

等等一直到100？

Thanks

谢谢

回答by Curt

Not with plain HTML I'm afraid.

恐怕不是纯 HTML。

You could use some jQuery to do this though:

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

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

-- SEE DEMO --

-- 查看演示 --

You can download jQuery here

你可以在这里下载jQuery

回答by totallyNotLizards

Not with pure HTML as far as I know.

据我所知，不是纯 HTML。

But with JS or PHP or another scripting language such as JSP, you can do it very easily with a for loop.

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

Example in PHP:

PHP 中的示例：

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

回答by DarkAjax

Are you using JavaScript or jQuery besides the html? If you are, you can do something like:

除了 html 之外，您还使用 JavaScript 还是 jQuery？如果是，您可以执行以下操作：

HTML:

HTML：

<select id='some_selector'></select>?

jQuery:

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:

兼容浏览器的另一个选项而不是选择，您可以使用 HTML5 的input type=number：

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

回答by jerome_mjt

In Html5, you can now use

在 Html5 中，您现在可以使用

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

回答by James

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

我看到这很旧但是......我不知道你是否正在寻找每次加载时生成数字/选项的代码。但是我使用 excel 或打开的 office calc 页面并始终使用自动编号。它可能看起来像这样......

| <option>| 1 | </option>|

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

然后我突出显示行中的单元格并将它们向下拖动，直到有 100 或我需要的数字。我现在有我刚刚参考的代码片段。

回答by Kuf

Jquery One-liners:

Jquery One-liners：

ES6 + jQuery:

ES6 + jQuery：

$('#select').append([...Array(100).keys()].map((i,j) => `< option >${i}</option >`))

Lodash + jQuery:

洛达什 + jQuery：

$('#select').append(_.range(100).map(function(i,j){ return $('<option>',{text:i})}))

回答by ChrisBrownie55

As everyone else has said, there isn't one in html; however, you could use PUG/Jade. In fact I do this often.

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

It would look something like this:

它看起来像这样：

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

This would produce:

这将产生：