jimfog Posted January 21, 2014 Share Posted January 21, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 21, 2014 Share Posted January 21, 2014 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 comment Share on other sites More sharing options...
jimfog Posted January 21, 2014 Author Share Posted January 21, 2014 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 comment Share on other sites More sharing options...
Ingolme Posted January 21, 2014 Share Posted January 21, 2014 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 comment Share on other sites More sharing options...
jimfog Posted January 21, 2014 Author Share Posted January 21, 2014 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 comment Share on other sites More sharing options...
Ingolme Posted January 21, 2014 Share Posted January 21, 2014 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 comment Share on other sites More sharing options...
Hadien Posted January 22, 2014 Share Posted January 22, 2014 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 comment Share on other sites More sharing options...
rox94ana Posted January 27, 2014 Share Posted January 27, 2014 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 comment Share on other sites More sharing options...
thescientist Posted January 27, 2014 Share Posted January 27, 2014 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now