for loop populate <option> tag 1

[vttech]

I want to use javascript to populate a list using the <select> and <option> with a for loop.

Example:

For(val time=7:00; time<=8:00; time=time+:15)
{

}
Thus is would produce the result below

<select>
<option value ="time1">7:00</option>
<<option value ="time2">7:15</option>
<option value ="time3">7:30</option>
option value ="time4">7:45</option>
option value ="time5">8:00</option>
</select>

looking for some ideas or an example

 

[trollacious]

Since the example you provided is so simple, I'd suggest just hard coding it in. If you need help with something more complex that would benefit from using programming, provide the details of that and we'll come up with something.

You will want to write the HTML correctly, as well, since your example has misplaced and missing tag brackets.

Lee

 

[vttech]

sorry for the example not being perfect. I made the list simple because I need an example to figure out a more complex list.

I want to create a list that will show the time of day in 15 minute intervals. Thus you can see my need to see if I can use a for loop to accomplish this task or else my code will be very large.

again try to use for loop to create a drop down list

<code>
<select>
<option value ="time1">7:00</option>
<option value ="time2">7:15</option>
<option value ="time3">7:30</option>
<option value ="time4">7:45</option>
<option value ="time5">8:00</option>
</select>
</code>

 

[trollacious]

How about something like:

var starthour = 7, endhour = 10;
var timeindex = 1;
document.write('<select name="time">');
for (var hi = starthour, hi < endhour; hi++)
  {
  document.write(<option value ="time' + timeindex + '">';
  document.write(hi + ':00';
  document.write('</option>');
  timeindex++;

  document.write(<option value ="time' + timeindex + '">';
  document.write(hi + ':15';
  document.write('</option>');
  timeindex++;

  document.write(<option value ="time' + timeindex + '">';
  document.write(hi + ':30';
  document.write('</option>');
  timeindex++;

  document.write(<option value ="time' + timeindex + '">';
  document.write(hi + ':45';
  document.write('</option>');
  timeindex++;
  }

document.write(<option value ="time' + timeindex + '">';
document.write(endhour + ':00';
document.write('</option>');
document.write('</select>');

Lee

 

[vttech]

Ok that gave me a great starting point and I was able to produce the following script to solve my issue.

<script lanuage="javascript">

var ampm="AM"
timeindex=1

document.write("<SELECT>")

for (var hour=5; hour<24; hour++)
{

for (var min=0; min<=45; min=min+15)

{
if(min==0)
{
if(hour>12)
{
hour=hour-12
ampm="PM"
document.write("<option value="+hour+timeindex+">"+hour+":"+min+min+" "+ampm+"</option>")
hour=hour+12
timeindex++
}
else if(hour==12)
{
ampm="PM"
document.write("<option value="+hour+timeindex+">"+hour+":"+min+min+" "+ampm+"</option>")
timeindex++
}
else
{
document.write("<option value="+hour+timeindex+">"+hour+":"+min+min+" "+ampm+"</option>")
timeindex++
}
}
else
{
if(hour>12)
{
hour=hour-12
ampm="PM"
document.write("<option value="+hour+timeindex+">"+hour+":"+min+" "+ampm+"</option>")
hour=hour+12
timeindex++
}
else
{
document.write("<option value="+hour+timeindex+">"+hour+":"+min+" "+ampm+"</option>")
timeindex++
}
}
}
}
document.write("</SELECT>")

</script>

 

[woja]

Or try:

{JavaScript}

function populateList(aList, aStartHour, aEndHour) {
   var itemIndex = 0;
   // firstly empty the list if it's got anthing in it.
   while (aList.options.length > 0) {
      aList.options.remove(0);
   }
   // now add the new items;
   for (var h = aStartHour; (h < aEndHour); ++h) {
      var hs = ((h < 10) ? "0" : "") + h;
      // do the fifteen minute thing
      for (var m = 0; (m < 60); m += 15) {
         var opt = document.createElement("OPTION");
         var ms = ((m < 10) ? "0" : "") + m;
         aList.options.add(opt);
         opt.value = "time" + itemIndex;
         opt.innerText = hs + ":" + ms;
         ++itemIndex;
      }
   }
   return;
}
function onLoad() {
   ...
   populateList(document.getElementById("hlist"), 8, 12);
   ...
   return;
}

{HTML}

<html>
   <head>
      ...
   </head>
   <body onload="onLoad();">
      ...
      <select id="hlist"></select>
   </body>
</html>

Hope this helps.

[tt]_______________________________________
Roger
The Eileens are out there[/tt]

 

[vttech]

From the link and code below you will notice that I created a table using html and I used JavaScript to populate a drop down list consisting of times.

I want to be able to calculate the time work by subtracting Time Out – Time In and placing that value in the Hours column adjacent those fields

ExampleOfProject

var ampm="AM"
timeindex=1

document.write("<SELECT>")

for (var hour=5; hour<24; hour++)
{

     for (var min=0; min<=45; min=min+15)

     {
      if(min==0)
      {
       if(hour>12)
       {
       hour=hour-12
       ampm="PM"
       document.write("<option value="+hour+timeindex+">"+hour+":"+min+min+" "+ampm+"</option>")
       hour=hour+12
       timeindex++
       }
       else if(hour==12)
       {
       ampm="PM"
       document.write("<option value="+hour+timeindex+">"+hour+":"+min+min+" "+ampm+"</option>")
       timeindex++
       }
       else
       {
       document.write("<option value="+hour+timeindex+">"+hour+":"+min+min+" "+ampm+"</option>")
       timeindex++
       }
      }
      else
      {
       if(hour>12)
       {
       hour=hour-12
       ampm="PM"
       document.write("<option value="+hour+timeindex+">"+hour+":"+min+" "+ampm+"</option>")
       hour=hour+12
       timeindex++
       }
       else
       {
       document.write("<option value="+hour+timeindex+">"+hour+":"+min+" "+ampm+"</option>")
       timeindex++
       }
      }
     }
}
document.write("</SELECT>")

Newbie in search of knowledge