Databases
StackOverflow2013
Postsdbo
POJavascript Drop Down Function
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Drop Down Function
    text
    copied!<p>I am trying to create a drop down calendar. No jquery! Pure javascript. So far @rlemon has provided me great assistance and I have been able to build off code he has helped me with. I am almost finished, but am having a few small problems. So far everything works correctly, but now I am moving onto incorporating leap years which is where I am having problems. I am having trouble determining the current year that is selected. I have </p> <pre><code>sel_year.onchange = recalculateDays2(this); </code></pre> <p>which I believe is passing the value of the current year selected. Then in the function recalculateDays2 I am creating a variable </p> <pre><code>year_index = x.text; </code></pre> <p>which is supposed to be something like year_index = 2011, 2012 etc. I want the function recalculateDays2 to set feb days to 29 when the user has changed to the year 2012. Please help...</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; Calendar&lt;br&gt; &lt;hr align="left" width="200px"/&gt; --Year ------ Month ----- Day&lt;br&gt; &lt;div id="calendar-container"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; (function() { var yr1 = 2011, yr2 = 2012, yr3 = 2013, yr4 = 2014; var years = [yr1, yr2, yr3, yr4]; var calendar = [ ["January", 31],["February", 28],["March", 31],["April", 30],["May", 31],["June", 30],["July", 31],["August", 31],["September", 30],["October", 31],["November", 30],["December", 31]], //this is the variable that accesses the content cont = document.getElementById('calendar-container'); //creates the variables for the drop downs var sel_year = document.createElement('select'), sel_month = document.createElement('select'), sel_day = document.createElement('select'); function createOption(txt, val) { //this creates the option but it seems that it is making the value -1 than what the text node is var option = document.createElement('option'); option.value = val; option.appendChild(document.createTextNode(txt)); return option; } function createYearOption(val) { var option = document.createElement('option'); option.value = val; option.appendChild(document.createTextNode(val)); return option; } //this clears any elements for days, months, years function clearChildren(ele) { while (ele.hasChildNodes()) { ele.removeChild(ele.lastChild); } } //this function is only triggered when you recalculate the months function recalculateDays() { var month_index = sel_month.value, df = document.createDocumentFragment(); //l is the variable for the number of days in the month from the array above ex:28, 30, 31 for (var i = 0, l = calendar[month_index][1]; i &lt; l; i++) { //the first variable is what number will be displayed in the day drop down df.appendChild(createOption(i + 1, i)); } clearChildren(sel_day); sel_day.appendChild(df); } //this function is triggered only when you change the year function recalculateDays2(x) { var month_index = sel_month.value, df = document.createDocumentFragment(), year_index = x.text; //this checks to see if the month selected is Feb if ((month_index == 1) &amp;&amp; (year_index == 2012)) { //l is the variable for the number of days in the month from the array above ex:28, 30, 31 for (var i = 0, l = calendar[month_index][1]; i &lt; l + 1; i++) { //the first variable is what number will be displayed in the day drop down df.appendChild(createOption(i + 1, i)); } clearChildren(sel_day); sel_day.appendChild(df); } else {}} function generateMonths() { var df = document.createDocumentFragment(); calendar.forEach(function(info, i) { df.appendChild(createOption(info[0], i)); }); //clears past months clearChildren(sel_month); //appends new months onto variable df sel_month.appendChild(df); } function generateYears() { var df = document.createDocumentFragment(); years.forEach(function(i) { df.appendChild(createYearOption(i)); }); //clears past months clearChildren(sel_year); //appends new months onto variable df sel_year.appendChild(df); } //anytime the month selector is changed this calls the function to change the days sel_month.onchange = recalculateDays; sel_year.onchange = recalculateDays2(this); //i believe this automatically runs the months and days functions specifically for when first loading the page generateMonths(); recalculateDays(); generateYears(); //this is what displays each of the individual drop downs after everything has been done to them cont.appendChild(sel_year); cont.appendChild(sel_month); cont.appendChild(sel_day); }()); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload