Легкий способ добавить выпадающее меню с 1 - 100 без 100 различных опций?

Мне просто интересно, есть ли простой ярлык для добавления опций в раскрывающееся меню для чисел от 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?

Спасибо

Ответ 1

Не с простым HTML, я боюсь.

Вы можете использовать некоторый jQuery, чтобы сделать это, хотя:

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

- СМОТРЕТЬ ДЕМО -

Вы можете скачать jQuery здесь

Ответ 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>

Ответ 3

Используете ли вы JavaScript или jQuery, кроме html? Если да, вы можете сделать что-то вроде:

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

Как вы можете посмотреть здесь.

Другой вариант для совместимых браузеров вместо выбора, вы можете использовать HTML5 input type=number:

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

Ответ 4

Я вижу, что это старый, но... Я не знаю, ищете ли вы код для генерации чисел/опций каждый раз, когда он загружен или нет. Но я использую страницу excel или open office calc и все время использую автоматическую нумерацию. Это может выглядеть так...

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

Затем я выделяю ячейки в строке и перетаскиваю их до 100 или числа, которое мне нужно. Теперь у меня есть фрагменты кода, на которые я просто ссылаюсь.

Ответ 5

JQuery Однострочные:

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

Ответ 6

Как и все остальные, в html нет ни одного; однако вы можете использовать PUG/Jade. На самом деле я часто это делаю.

Он будет выглядеть примерно так:

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

Это приведет к:

Ответ 7

Если это всегда 100, лучше всего ставить его в HTML. Благодаря многострочному редактированию или даже простому трюку Excel это не должно занять слишком много времени, и это не повредит процессор во время выполнения, каждый раз. Знаешь, ему тоже скучно...