HTML 表单下拉菜单指定数字范围答案

【问题标题】：HTML form dropdown menu specify number rangeHTML 表单下拉菜单指定数字范围
【发布时间】：2013-05-24 19:23:12
【问题描述】：

我想在下拉菜单列表中指定数字范围，例如我目前正在执行的示例中的 1-24

<select name="hour">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
...
...
<option value="24">24</option>
</select>

有什么方法可以说使用 1-24 并动态创建下拉菜单，我想我们需要使用 Javascript 但我不知道如何编码？

【问题讨论】：

标签： php javascript html

【解决方案1】：

这个答案现在可能有用。使用 HTML5，它变得更简单。我们不需要 javascript 来做同样的事情。大多数现代浏览器都支持。无法检查旧 IE 版本。

<label for="hour">Hour:</label>
<input type="number" id="hour" min="1" max="24" />

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

【讨论】：

【解决方案2】：

如果您只想使用 Javascript，您可以执行以下操作：

for(var i=1; i<=24; i++){
    var select = document.getElementById("hours");
    var option = document.createElement("OPTION");
    select.options.add(option);
    option.text = i;
    option.value = i;
}

这是一个 jsFiddle 示例： jsFiddle

【讨论】：

【解决方案3】：

你不需要 Javascript，你可以使用 PHP for 循环：

<select name="hour">
    <?php for ($i = 1; $i <= 24; $i++) : ?>
        <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
    <?php endfor; ?>
</select>

【讨论】：

@Satish 哈哈！如果有用，请不要忘记标记为最佳答案:)
为什么不...我会的，但你必须等待 10 分钟 :)

【解决方案4】：

即使我在你的例子之后也想出了以下几点：

<?php
echo "<select>";
for ($h = 1; $h <= 24; $h++) echo "<option value='$h'>$h</option>";
echo "</select>";
?>

【讨论】：

【解决方案5】：

使用 PHP Range — Create an array containing a range of elements

echo '<select name="hour">';
foreach (range(1,24) as $number) {
        echo '<option value='.$number.'>'.$number.'</option>';
}
echo '</select>';

【讨论】：