html - 100の異なるオプションを実行せずに1〜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))
    }
});​

-デモを見る-

ここからjQueryをダウンロードできます

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

あなたがここで見ることができるように。

selectの代わりに互換性のあるブラウザの別のオプションを使用できます。HTML5のinput type=number：

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

Answer 4

In Html5, you can now use

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

Answer 5

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.

Answer 6

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 7

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

This would produce: