creating timeslots using a for loop

[jimfog]

I am creating a calendar where by clicking a cell, a popup windows appears with 2 drop down menus where the user

can select time and duration-just like outlook.com

 

So far the most convenient way to create all the timeslots that will go to the drop down menu is by creating an array(with the timeslots)

and looping through it-something like that:

 var timeslots=["08:00","08:30","09:00","09:30","10:00"];                  for (var i=0; i<timeslots.length; i++)          {          document.write(timeslots[i]+ "<br>");    }

What do you think?That is one question.

The second question is how am I going to "tie" the above with the dropdown menu-meaning with a select element and option values in it.

I mean how the syntax is going be like?

Edited January 21, 2014 by jimfog

[Ingolme]

Better to do it with PHP.

 

Create a <select> element and one <option> element for each timeslot.

var html = "<select name='time'>";for(var i=0; i < timeslots.length; i++) {    html += "<option value='" + timeslots[i] + ">" + timeslots[i] + "</option>";}html += "</select>";element.innerHTML = html;

[jimfog]

 

Better to do it with PHP.

 

Create a <select> element and one <option> element for each timeslot.

var html = "<select name='time'>";for(var i=0; i < timeslots.length; i++) {    html += "<option value='" + timeslots[i] + ">" + timeslots[i] + "</option>";}html += "</select>";element.innerHTML = html;

Υοu are saying PHP but your code is javascript.

Maybe you accidentally wrote PHP.

 

Besides the whole calendar is JS-based.

[Ingolme]

I created it in Javascript since that's what you're working with now. Converting the code to PHP wouldn't be very difficult.

 

It's just a short code showing how to put data into a dropdown list.

[jimfog]

well, there an issue to be solved yet, and that is to make the code jquery friendly.

 

I have made the changes but the result is that the options of the select element are simply not printed in the browser.

 

Here is some code to tell me what you think-the HTML first:

    <select  class="drop></select>

And here is the js:

$(document).ready(function(){     var timeslots=["08:00","08:30","09:00","09:30","10:00"];     for (var i=0; i<timeslots.length; i++)              {     var html = "<option value='" + timeslots[i] + ">" + timeslots[i] + "</option>";              }     $('.drop').html(html);         });

If there is not problem with the code,then there is something else.

But I wanted to be sure that the code is at least OK

[Ingolme]

You're redeclaring the value of html on every iteration of the loop. What you want to do is add new data to it. Look how it works in my example. I advise against ever using the var keyword in a loop.

 

I'm not entirely familiar with jQuery, but because it's a class selector, $('.drop') probably returns a list of items, so I'm not sure if the .html() method would work. You might need to target a single element. If you give the element an ID rather than a class name then that won't be a problem.

[Hadien]

jQuery would simply apply the html to all of them. $() almost always returns a collection object even if there was only one element found. and most query functions would apply their effects to all elements in that collection. but you are right, he is overwriting the previous options and the last option would only appear.

 

you can try this

$(document).ready(function(){     var timeslots=["08:00","08:30","09:00","09:30","10:00"];     var drop = $(".drop");     for (var i=0; i<timeslots.length; i++)         {               drop.append(                    $("<option>").val(timeslots[i])                                 .text(timeslots[i])               );         }         });

[rox94ana]

Hi. I need to use this jQuery Effects for my site.

 

For example:

</script>

<script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideToggle("slow");

});

});

</script>

<style type="text/css">

#panel,#flip

{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel

{

padding:50px;

display:none;

}

</style>

</head>

<body>

<div id="flip">Option 1</div>

<div id="panel">message 1</div>

</body>

</html>

 

But I need to add some more options.

<div id="flip">Option 1</div>

<div id="panel">message 1</div>

<div id="flip">Options 2</div>

<div id="panel">message 2</div>

But this code doesn't work. The first option works good, but when I click on the second option, it doesn't slide down.

Some ideas?

 

[thescientist]

1) you should make your own thread if you have a new question

2) ID's are only meant to be used on one unique item on the page. You should change #flip to a class, and then target the descendant panel of the clicked flip.