How to add a year in select tag using javascript





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?



HTML:



                <div class="cell colspan3">
<div class="input-control select full-size">
<h5>Year:</h5>
<select id="cboYear">
<option value="0" selected disabled hidden>Select Year</option>

</select>
</div>
</div>


JAVASCRIPT:



function Years() {
var today = new Date(),
yyyy = today.getFullYear()


for (var i = 0; i < 10; i++, yyyy++) {
for (var x = 1; x > i; x++) {
$('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
}
}
}









share|improve this question





























    1















    I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?



    HTML:



                    <div class="cell colspan3">
    <div class="input-control select full-size">
    <h5>Year:</h5>
    <select id="cboYear">
    <option value="0" selected disabled hidden>Select Year</option>

    </select>
    </div>
    </div>


    JAVASCRIPT:



    function Years() {
    var today = new Date(),
    yyyy = today.getFullYear()


    for (var i = 0; i < 10; i++, yyyy++) {
    for (var x = 1; x > i; x++) {
    $('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
    }
    }
    }









    share|improve this question

























      1












      1








      1








      I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?



      HTML:



                      <div class="cell colspan3">
      <div class="input-control select full-size">
      <h5>Year:</h5>
      <select id="cboYear">
      <option value="0" selected disabled hidden>Select Year</option>

      </select>
      </div>
      </div>


      JAVASCRIPT:



      function Years() {
      var today = new Date(),
      yyyy = today.getFullYear()


      for (var i = 0; i < 10; i++, yyyy++) {
      for (var x = 1; x > i; x++) {
      $('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
      }
      }
      }









      share|improve this question














      I need to add the year 2015 to present year in a select tag in html using javascript. I have a code below but it does not display or return the expected value and the select tag is also empty. how can i achieved that?



      HTML:



                      <div class="cell colspan3">
      <div class="input-control select full-size">
      <h5>Year:</h5>
      <select id="cboYear">
      <option value="0" selected disabled hidden>Select Year</option>

      </select>
      </div>
      </div>


      JAVASCRIPT:



      function Years() {
      var today = new Date(),
      yyyy = today.getFullYear()


      for (var i = 0; i < 10; i++, yyyy++) {
      for (var x = 1; x > i; x++) {
      $('#cboYear').append('<option value ="' + x + '">' + yyyy + '</option>')
      }
      }
      }






      javascript html






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 3 at 2:49







      user10237424































          3 Answers
          3






          active

          oldest

          votes


















          0














          .add() method




          1. get reference to <select> tag | .querySelector(selector);

          2. create an <option> tag | .createElement("option");

          3. add text | option.text property

          4. set value | option.value property

          5. then add <option> to <select> | select.add(option) method

          6. repeat process through a for loop




          Demo






          function setOpt(selector, text, value) {
          var node = document.querySelector(selector);
          var opt = document.createElement("option");
          opt.text = text;
          opt.value = value;
          node.add(opt);
          return false;
          }

          function T(t) {
          var now = new Date();
          var time;
          switch (t.toLowerCase()) {
          case 'm':
          time = now.getMonth() + 1;
          break;
          case 'd':
          time = now.getDate();
          break;
          case 'y':
          time = now.getFullYear();
          break;
          default:
          break;
          }
          return time;
          }
          for (let i = 2015; i <= T('y'); i++) {
          setOpt('#cboYear', i, i);
          }

          <div class="cell colspan3">
          <div class="input-control select full-size">
          <h5>Year:</h5>
          <select id="cboYear">
          <option value="0" selected disabled hidden>Select Year</option>

          </select>
          </div>
          </div>








          share|improve this answer





















          • 1





            My pleasure, happy coding.

            – zer00ne
            Jan 3 at 6:54



















          0














          Assuming that you are using jquery in your web app, I made a little modification in your posted code. Here is the code for appending years 2015 to present using loops in javascript.



          <script type="text/javascript">

          $(document).ready(function(){
          Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
          });

          function Years() {
          // get the current date and put in today variable
          var today = new Date();
          // get the year and put it in yyyy variable
          yyyy = today.getFullYear();

          // appending from year 2015 up to present in the select tag
          for (var index = 2015; index <= yyyy; index++) {
          $('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
          }
          }
          </script>





          share|improve this answer































            0














            Hope it's help you:



            HTML



            <div class="cell colspan3">
            <div class="input-control select full-size">
            <h5>Year:</h5>
            <select id="cboYear"></select>
            </div>
            </div>


            Script code



            function Years() {
            var today = new Date();
            var yyyy = today.getFullYear();
            var content = '<option value="-1">Select Year</option>';

            for (var x = 1; x <= 10; x++, yyyy++) {
            content += '<option value="' + x + '">' + yyyy + '</option>';
            }
            $('#cboYear').append(content);
            }


            Don't forget to add jquery:



            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





            share|improve this answer
























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015705%2fhow-to-add-a-year-in-select-tag-using-javascript%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown
























              3 Answers
              3






              active

              oldest

              votes








              3 Answers
              3






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              0














              .add() method




              1. get reference to <select> tag | .querySelector(selector);

              2. create an <option> tag | .createElement("option");

              3. add text | option.text property

              4. set value | option.value property

              5. then add <option> to <select> | select.add(option) method

              6. repeat process through a for loop




              Demo






              function setOpt(selector, text, value) {
              var node = document.querySelector(selector);
              var opt = document.createElement("option");
              opt.text = text;
              opt.value = value;
              node.add(opt);
              return false;
              }

              function T(t) {
              var now = new Date();
              var time;
              switch (t.toLowerCase()) {
              case 'm':
              time = now.getMonth() + 1;
              break;
              case 'd':
              time = now.getDate();
              break;
              case 'y':
              time = now.getFullYear();
              break;
              default:
              break;
              }
              return time;
              }
              for (let i = 2015; i <= T('y'); i++) {
              setOpt('#cboYear', i, i);
              }

              <div class="cell colspan3">
              <div class="input-control select full-size">
              <h5>Year:</h5>
              <select id="cboYear">
              <option value="0" selected disabled hidden>Select Year</option>

              </select>
              </div>
              </div>








              share|improve this answer





















              • 1





                My pleasure, happy coding.

                – zer00ne
                Jan 3 at 6:54
















              0














              .add() method




              1. get reference to <select> tag | .querySelector(selector);

              2. create an <option> tag | .createElement("option");

              3. add text | option.text property

              4. set value | option.value property

              5. then add <option> to <select> | select.add(option) method

              6. repeat process through a for loop




              Demo






              function setOpt(selector, text, value) {
              var node = document.querySelector(selector);
              var opt = document.createElement("option");
              opt.text = text;
              opt.value = value;
              node.add(opt);
              return false;
              }

              function T(t) {
              var now = new Date();
              var time;
              switch (t.toLowerCase()) {
              case 'm':
              time = now.getMonth() + 1;
              break;
              case 'd':
              time = now.getDate();
              break;
              case 'y':
              time = now.getFullYear();
              break;
              default:
              break;
              }
              return time;
              }
              for (let i = 2015; i <= T('y'); i++) {
              setOpt('#cboYear', i, i);
              }

              <div class="cell colspan3">
              <div class="input-control select full-size">
              <h5>Year:</h5>
              <select id="cboYear">
              <option value="0" selected disabled hidden>Select Year</option>

              </select>
              </div>
              </div>








              share|improve this answer





















              • 1





                My pleasure, happy coding.

                – zer00ne
                Jan 3 at 6:54














              0












              0








              0







              .add() method




              1. get reference to <select> tag | .querySelector(selector);

              2. create an <option> tag | .createElement("option");

              3. add text | option.text property

              4. set value | option.value property

              5. then add <option> to <select> | select.add(option) method

              6. repeat process through a for loop




              Demo






              function setOpt(selector, text, value) {
              var node = document.querySelector(selector);
              var opt = document.createElement("option");
              opt.text = text;
              opt.value = value;
              node.add(opt);
              return false;
              }

              function T(t) {
              var now = new Date();
              var time;
              switch (t.toLowerCase()) {
              case 'm':
              time = now.getMonth() + 1;
              break;
              case 'd':
              time = now.getDate();
              break;
              case 'y':
              time = now.getFullYear();
              break;
              default:
              break;
              }
              return time;
              }
              for (let i = 2015; i <= T('y'); i++) {
              setOpt('#cboYear', i, i);
              }

              <div class="cell colspan3">
              <div class="input-control select full-size">
              <h5>Year:</h5>
              <select id="cboYear">
              <option value="0" selected disabled hidden>Select Year</option>

              </select>
              </div>
              </div>








              share|improve this answer















              .add() method




              1. get reference to <select> tag | .querySelector(selector);

              2. create an <option> tag | .createElement("option");

              3. add text | option.text property

              4. set value | option.value property

              5. then add <option> to <select> | select.add(option) method

              6. repeat process through a for loop




              Demo






              function setOpt(selector, text, value) {
              var node = document.querySelector(selector);
              var opt = document.createElement("option");
              opt.text = text;
              opt.value = value;
              node.add(opt);
              return false;
              }

              function T(t) {
              var now = new Date();
              var time;
              switch (t.toLowerCase()) {
              case 'm':
              time = now.getMonth() + 1;
              break;
              case 'd':
              time = now.getDate();
              break;
              case 'y':
              time = now.getFullYear();
              break;
              default:
              break;
              }
              return time;
              }
              for (let i = 2015; i <= T('y'); i++) {
              setOpt('#cboYear', i, i);
              }

              <div class="cell colspan3">
              <div class="input-control select full-size">
              <h5>Year:</h5>
              <select id="cboYear">
              <option value="0" selected disabled hidden>Select Year</option>

              </select>
              </div>
              </div>








              function setOpt(selector, text, value) {
              var node = document.querySelector(selector);
              var opt = document.createElement("option");
              opt.text = text;
              opt.value = value;
              node.add(opt);
              return false;
              }

              function T(t) {
              var now = new Date();
              var time;
              switch (t.toLowerCase()) {
              case 'm':
              time = now.getMonth() + 1;
              break;
              case 'd':
              time = now.getDate();
              break;
              case 'y':
              time = now.getFullYear();
              break;
              default:
              break;
              }
              return time;
              }
              for (let i = 2015; i <= T('y'); i++) {
              setOpt('#cboYear', i, i);
              }

              <div class="cell colspan3">
              <div class="input-control select full-size">
              <h5>Year:</h5>
              <select id="cboYear">
              <option value="0" selected disabled hidden>Select Year</option>

              </select>
              </div>
              </div>





              function setOpt(selector, text, value) {
              var node = document.querySelector(selector);
              var opt = document.createElement("option");
              opt.text = text;
              opt.value = value;
              node.add(opt);
              return false;
              }

              function T(t) {
              var now = new Date();
              var time;
              switch (t.toLowerCase()) {
              case 'm':
              time = now.getMonth() + 1;
              break;
              case 'd':
              time = now.getDate();
              break;
              case 'y':
              time = now.getFullYear();
              break;
              default:
              break;
              }
              return time;
              }
              for (let i = 2015; i <= T('y'); i++) {
              setOpt('#cboYear', i, i);
              }

              <div class="cell colspan3">
              <div class="input-control select full-size">
              <h5>Year:</h5>
              <select id="cboYear">
              <option value="0" selected disabled hidden>Select Year</option>

              </select>
              </div>
              </div>






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Jan 3 at 3:46

























              answered Jan 3 at 3:23









              zer00nezer00ne

              25.4k32547




              25.4k32547








              • 1





                My pleasure, happy coding.

                – zer00ne
                Jan 3 at 6:54














              • 1





                My pleasure, happy coding.

                – zer00ne
                Jan 3 at 6:54








              1




              1





              My pleasure, happy coding.

              – zer00ne
              Jan 3 at 6:54





              My pleasure, happy coding.

              – zer00ne
              Jan 3 at 6:54













              0














              Assuming that you are using jquery in your web app, I made a little modification in your posted code. Here is the code for appending years 2015 to present using loops in javascript.



              <script type="text/javascript">

              $(document).ready(function(){
              Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
              });

              function Years() {
              // get the current date and put in today variable
              var today = new Date();
              // get the year and put it in yyyy variable
              yyyy = today.getFullYear();

              // appending from year 2015 up to present in the select tag
              for (var index = 2015; index <= yyyy; index++) {
              $('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
              }
              }
              </script>





              share|improve this answer




























                0














                Assuming that you are using jquery in your web app, I made a little modification in your posted code. Here is the code for appending years 2015 to present using loops in javascript.



                <script type="text/javascript">

                $(document).ready(function(){
                Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
                });

                function Years() {
                // get the current date and put in today variable
                var today = new Date();
                // get the year and put it in yyyy variable
                yyyy = today.getFullYear();

                // appending from year 2015 up to present in the select tag
                for (var index = 2015; index <= yyyy; index++) {
                $('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
                }
                }
                </script>





                share|improve this answer


























                  0












                  0








                  0







                  Assuming that you are using jquery in your web app, I made a little modification in your posted code. Here is the code for appending years 2015 to present using loops in javascript.



                  <script type="text/javascript">

                  $(document).ready(function(){
                  Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
                  });

                  function Years() {
                  // get the current date and put in today variable
                  var today = new Date();
                  // get the year and put it in yyyy variable
                  yyyy = today.getFullYear();

                  // appending from year 2015 up to present in the select tag
                  for (var index = 2015; index <= yyyy; index++) {
                  $('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
                  }
                  }
                  </script>





                  share|improve this answer













                  Assuming that you are using jquery in your web app, I made a little modification in your posted code. Here is the code for appending years 2015 to present using loops in javascript.



                  <script type="text/javascript">

                  $(document).ready(function(){
                  Years(); // this will run the function Years() after the DOM (document object model) has been loaded.
                  });

                  function Years() {
                  // get the current date and put in today variable
                  var today = new Date();
                  // get the year and put it in yyyy variable
                  yyyy = today.getFullYear();

                  // appending from year 2015 up to present in the select tag
                  for (var index = 2015; index <= yyyy; index++) {
                  $('#cboYear').append('<option value ="' + index + '">' + index + '</option>')
                  }
                  }
                  </script>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Jan 3 at 3:22









                  MiggyMiggy

                  726315




                  726315























                      0














                      Hope it's help you:



                      HTML



                      <div class="cell colspan3">
                      <div class="input-control select full-size">
                      <h5>Year:</h5>
                      <select id="cboYear"></select>
                      </div>
                      </div>


                      Script code



                      function Years() {
                      var today = new Date();
                      var yyyy = today.getFullYear();
                      var content = '<option value="-1">Select Year</option>';

                      for (var x = 1; x <= 10; x++, yyyy++) {
                      content += '<option value="' + x + '">' + yyyy + '</option>';
                      }
                      $('#cboYear').append(content);
                      }


                      Don't forget to add jquery:



                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





                      share|improve this answer




























                        0














                        Hope it's help you:



                        HTML



                        <div class="cell colspan3">
                        <div class="input-control select full-size">
                        <h5>Year:</h5>
                        <select id="cboYear"></select>
                        </div>
                        </div>


                        Script code



                        function Years() {
                        var today = new Date();
                        var yyyy = today.getFullYear();
                        var content = '<option value="-1">Select Year</option>';

                        for (var x = 1; x <= 10; x++, yyyy++) {
                        content += '<option value="' + x + '">' + yyyy + '</option>';
                        }
                        $('#cboYear').append(content);
                        }


                        Don't forget to add jquery:



                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





                        share|improve this answer


























                          0












                          0








                          0







                          Hope it's help you:



                          HTML



                          <div class="cell colspan3">
                          <div class="input-control select full-size">
                          <h5>Year:</h5>
                          <select id="cboYear"></select>
                          </div>
                          </div>


                          Script code



                          function Years() {
                          var today = new Date();
                          var yyyy = today.getFullYear();
                          var content = '<option value="-1">Select Year</option>';

                          for (var x = 1; x <= 10; x++, yyyy++) {
                          content += '<option value="' + x + '">' + yyyy + '</option>';
                          }
                          $('#cboYear').append(content);
                          }


                          Don't forget to add jquery:



                          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





                          share|improve this answer













                          Hope it's help you:



                          HTML



                          <div class="cell colspan3">
                          <div class="input-control select full-size">
                          <h5>Year:</h5>
                          <select id="cboYear"></select>
                          </div>
                          </div>


                          Script code



                          function Years() {
                          var today = new Date();
                          var yyyy = today.getFullYear();
                          var content = '<option value="-1">Select Year</option>';

                          for (var x = 1; x <= 10; x++, yyyy++) {
                          content += '<option value="' + x + '">' + yyyy + '</option>';
                          }
                          $('#cboYear').append(content);
                          }


                          Don't forget to add jquery:



                          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Jan 3 at 4:04









                          Majedur RahamanMajedur Rahaman

                          443311




                          443311






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015705%2fhow-to-add-a-year-in-select-tag-using-javascript%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              MongoDB - Not Authorized To Execute Command

                              in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

                              Npm cannot find a required file even through it is in the searched directory