CODEWITHSUNDEEP
phpjavascripthtml
Satish
Satish

Reputation: 17467

HTML form dropdown menu specify number range

I want to specify number range in drop-down menu list like 1-24 from example i am currently doing following

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

is there any way we can say use 1-24 and it dynamically create drop-down menu, I guess we need to use Javascript but i don't know how to code them?

Upvotes: 7

Views: 35853

Answers (5)

NewBee
NewBee

Reputation: 270

This answer might be useful now. With HTML5 it made simpler. we don't need javascript to do the same. Supported in most of the modern browsers. Could not check for older IE versions.

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

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

Upvotes: 6

ooo
ooo

Reputation: 1627

If you only wish to use Javascript, you could do something like:

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

Here is a jsFiddle example: jsFiddle

Upvotes: 4

Ace Indy
Ace Indy

Reputation: 109

Use 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>';

Upvotes: 0

Satish
Satish

Reputation: 17467

Even i have also figured out following after your example:

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

Upvotes: 0

Terry Harvey
Terry Harvey

Reputation: 840

You don't need Javascript, you can use a PHP for loop:

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

Upvotes: 16

Related Questions