Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Dropdown dynamically current year and previous year in html javascript

    <select name="YEAR" id="YEAR" >
    <option value="" >Select the Year</option>
    <option value="2012" >2012</option>
    <option value="2013" >2013</option>
    </select>

    i want to display first "Select the Year" when html page is opened and in that dropdown current year and previous year dynamically in that

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    What?

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-

    Code:
    <select name = "year" id = "year">
    <option value = "">Select the year ...</option>
    </select>
    
    <script type="text/javascript">
    
    var now = new Date();
    var currentYear = now.getFullYear();
    var previousYear = currentYear -1;
    addOption(document.getElementById("year"),currentYear,currentYear);
    addOption(document.getElementById("year"),previousYear,previousYear);
    
    function addOption(selectbox,optiontext,optionvalue ) {
    var optn = document.createElement("OPTION");
    optn.text = optiontext;
    optn.value = optionvalue;
    selectbox.options.add(optn);
    }
    
    </script>

    Moses led the Jews to the Red Sea where they made unleavened bread, which is bread made without any ingredients.
    - Pupil's answer to Catholic Elementary School test.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by Philip M View Post
    Here you are:-

    Code:
    <select name = "year" id = "year">
    <option value = "">Select the year ...</option>
    </select>
    
    <script type="text/javascript">
    
    var now = new Date();
    var currentYear = now.getFullYear();
    var previousYear = currentYear -1;
    addOption(document.getElementById("year"),currentYear,currentYear);
    addOption(document.getElementById("year"),previousYear,previousYear);
    
    function addOption(selectbox,optiontext,optionvalue ) {
    var optn = document.createElement("OPTION");
    optn.text = optiontext;
    optn.value = optionvalue;
    selectbox.options.add(optn);
    }
    
    </script>
    Why are you creating your own function for adding options in JavaScript rather than using the built in one.

    Code:
    <select name = "year" id = "year">
    <option value = "">Select the year ...</option>
    </select>
    
    <script type="text/javascript">
    var now = new Date();
    var currentYear = now.getFullYear();
    var previousYear = currentYear -1;
    var sel = document.getElementById('year');
    sel.options[0] = new Option(previousYear,previousYear);
    sel.options[1] = new Option(currentYear,currentYear);
    </script>
    Last edited by felgall; 01-25-2013 at 09:26 AM. Reason: Inserted missing quotes in getElementById('year')
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    Why are you creating your own function for adding options in JavaScript rather than using the built in one.

    Code:
    <select name = "year" id = "year">
    <option value = "">Select the year ...</option>
    </select>
    
    <script type="text/javascript">
    var now = new Date();
    var currentYear = now.getFullYear();
    var previousYear = currentYear -1;
    var sel = document.getElementById(year);
    sel.options[0] = new Option(previousYear,previousYear);
    sel.options[1] = new Option(currentYear,currentYear);
    </script>
    Well, mine works but yours doesn't unless you correct the errors. And does it matter?
    Last edited by Philip M; 01-25-2013 at 08:05 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by Philip M View Post
    Well, mine works but yours doesn't unless you correct the errors. And does it matter?
    So I left out two ' - easily fixed.

    Since my code is a lot shorter it is far easier to read and maintain.

    Six lines for mine and 11 for yours. Not really significant if that were your entire library of JavaScript.

    Now imagine of someone used code like yours for something 100 times as long - then there'd be 1100 lines of JavaScript to maintain instead of 600. Typically that would mean that changes would take a lot longer to apply. (The JavaScript I maintain is thousands of lines of code so using shorter versions where possible makes a huge difference to the time it takes to maintain it all).

    That my version will also by a microsecond or two faster than yours to run doesn't matter at all of course.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As we often say, there are many ways to skin a cat. IMO clarity is just as important and valuable as conciseness. I don't agree that they are they same. No script I have ever written has thousands of lines of code. But chacun à son goût as the Germans would say.

    I don't disagree with your point - just your crassness in making it. You will never win friends and influence people if you come across as The Taliban of Javascript. You often spoil your arguments with childish exaggerations and over-dogmatic assertions. And you brush away your own careless mistakes as being "easily fixed" (really? by newcomer kumar27??), while admitting that the changes in your alternative code are "not really significant" and "doesn't matter at all". I would suggest you avoid the "How many angels can dance on the end of a pin" mind-set.
    Last edited by Philip M; 01-25-2013 at 10:25 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by Philip M View Post
    IMO clarity is just as important and valuable as conciseness. I don't agree that they are they same.
    I agree - however in this particular instance the shorter version using the JavaScript command intended for the purpose is at least as clear as using a longer piece of code that uses a more generic call.

    No script I have ever written has thousands of lines of code.
    I wasn't suggesting that they all need to be in the same script in order to create that situation. I have around 500 separate scripts with somewhere between say 5 and 100 lines of code in each so the number of lines of JavaScript which means that between them I probably have over 10,000 lines of JavaScript code. Most of the situations where you suggest I am using exaggerated numbers the numbers I have used are a low estimate on what I have on my own sites - admittedly they may be very high figures for what occurs with most sites but they are certainly not unrealistic.

    I don't disagree with your point - just your crassness in making it.
    All I did was ask why you didn't use the JavaScript command specifically provided to add options to a select list and showed how using that halved the amount of code required compared to your solution. You were the one who for some reason took offense at their being a shorter way to write the code and instead of simply mentioning the typo I had made you used it to attack the entire concept of actually using a shorter alternative. Obviously you completely misinterpreted my intention in how you read my post.

    I don't have any problem with those who don't know all of the commands available in JavaScript using the ones that they do know and ending up with much more code as a result and I can't see why you would have a problem with my pointing out that there are JavaScript commands that can make a given piece of code a lot shorter. How will anyone learn the JavaScript commands they don't already know (in this particular instance the Option object) if they are not shown code that demonstrates that it exists and how it can be used?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Ummm...I hate to stick my nose in...but...

    (Okay, actually I love to, since we so seldom catch Felgall in a mistake. <grin/>

    Code:
    sel.options[0] = new Option(previousYear,previousYear);
    That just wiped out the existing
    Code:
    <option value = "">Select the year ...</option>
    Since we seem to be playing with making stuff shorter...
    Code:
    <select name = "year" id = "year">
    <option value = "">Select the year ...</option>
    </select>
    
    <script type="text/javascript">
    var yr = ( new Date() ).getFullYear();
    var sel = document.getElementById('year');
    sel.options[1] = new Option(yr-1,yr-1);
    sel.options[2] = new Option(yr,yr);
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm...I hate to stick my nose in...but...

    (Okay, actually I love to, since we so seldom catch Felgall in a mistake. <grin/>
    For some reason I was thinking that the existing entry was supposed to be overwritten by the year values when JavaScript is enabled. Not quite sure why I thought that - you are right that they should be 1 & 2 so as to not overwrite the 0 entry already there.

    and yes, your 4 line solution is better than the 6 line version I gave - even easier to maintain.
    Last edited by felgall; 01-26-2013 at 02:48 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    All I did was ask why you didn't use the JavaScript command specifically provided to add options to a select list and showed how using that halved the amount of code required compared to your solution. You were the one who for some reason took offense at their being a shorter way to write the code and instead of simply mentioning the typo I had made you used it to attack the entire concept of actually using a shorter alternative. Obviously you completely misinterpreted my intention in how you read my post.
    If I have misundertood your intention, then I apologise. I read your comment Why are you creating your own function for adding options in JavaScript rather than using the built in one as unnecessarily aggressive and school-masterish. You could come across as less belligerent had you said something more constructive and less abrasive like "You could in fact shorten the code by using the built-in functions rather than creating your own, although there is little practical difference." I would have welcomed that. It is just a matter of phrasing.

    You code included the errors that I and Old Pedant have pointed out. The lack of quotes in document.getElementById(year) means that the script does not work at all. The others simply give an incorrect answer. I think that people who live in glass houses ought not to throw stones. You are very highly respected and valued but please do not let it go to your head - you are not infallible. However, let us end this now.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •