Jump to content

creating timeslots using a for loop


Recommended Posts

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 by jimfog
Link to post
Share on other sites

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;
Link to post
Share on other sites

 

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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])               );         }         });
Link to post
Share on other sites

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?

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...