title: How to set option value dynamically using jquery/javascript
body: <p>I want to set option value dynamically using Jquery/Javascript.I am explaining my work flow with code below.</p>
  
  <blockquote>
    <p>index.html:</p>
  </blockquote>
  
  <pre><code>&lt;Ol&gt;
  &lt;div class="totalaligndiv" id="TextBoxContainer"&gt;
   &lt;li&gt;
   &lt;div class="col-md-4 bmargindiv1"&gt;
  &lt;label for="qualification" accesskey="Q"&gt;&lt;span class="required"&gt;*&lt;/span&gt; Qualification&lt;/label&gt;
  &lt;input name = "txtQualification" id="txtQualification" type="text" /&gt;
   &lt;/div&gt;
  &lt;div class="col-md-5 bmargindiv1"&gt;
  &lt;label for="college" accesskey="C"&gt;&lt;span class="required"&gt;*&lt;/span&gt; College&lt;/label&gt;
  &lt;input type="text" ID="txtCollege" name="college"/&gt;
  &lt;/div&gt;
  &lt;div class="col-md-2 bmargindiv1"&gt;
   &lt;label for="passingyear" accesskey="Q"&gt;&lt;span class="required"&gt;*&lt;/span&gt; Passing Year&lt;/label&gt;
  &lt;select ID="txtPassingYear" name="passingyear"&gt;
                                                              &lt;option&gt;Year&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="col-md-1 bmargindiv1"&gt;
  &lt;label for="action" accesskey="C"&gt;&amp;nbsp;&lt;/label&gt;
  &lt;button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)"&gt;+&lt;/button&gt;
  &lt;button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)"&gt;-&lt;/button&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/div&gt;
  &lt;/Ol&gt;
  
  &lt;script type="text/javascript"&gt;
   window.onload=function(){
      getYears();
   }
   function getYears() {
          var dropdown = document.getElementById("txtPassingYear");
          var currentTime = new Date();
          var year = currentTime.getFullYear();
          for (var i = year; i &gt;= 1960; i--) {
              var newOption = document.createElement('option');
              newOption.value = i;
              newOption.innerHTML = i;
              dropdown.add(newOption);
          }
      }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function GetDynamicTextBox(value, value1, value2) {
          return '&lt;div class="col-md-4 bmargindiv1"&gt;&lt;label for="qualification" accesskey="Q"&gt;&lt;span class="required"&gt;*&lt;/span&gt; Qualification&lt;/label&gt;' +
                  '&lt;input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" /&gt;' +
                  '&lt;/div&gt;' +
                  '&lt;div class="col-md-5 bmargindiv1"&gt;' +
                      '&lt;label for="college" accesskey="C"&gt;&lt;span class="required"&gt;*&lt;/span&gt; College&lt;/label&gt;' +
                      '&lt;input type="text" ID="txtCollege" name="college" value = "' + value1 + '" /&gt;' +
                  '&lt;/div&gt;' +
                  '&lt;div class="col-md-2 bmargindiv1"&gt;' +
                      '&lt;label for="passingyear" accesskey="Q"&gt;&lt;span class="required"&gt;*&lt;/span&gt; Passing Year&lt;/label&gt;' +
                      '&lt;select ID="txtPassingYear" name="passingyear"&gt;' +
  
                      '&lt;/select&gt;' +
                  '&lt;/div&gt;' +
                  '&lt;div class="col-md-1 bmargindiv1"&gt;' +
                      '&lt;label for="action" accesskey="C"&gt;&amp;nbsp;&lt;/label&gt;' +
                  '&lt;button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)"&gt;+&lt;/button&gt;' +
                  '&lt;button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)"&gt;-&lt;/button&gt;'
      }
      function AddTextBox(objId) {
  
          var div = document.createElement('li');
          div.innerHTML = GetDynamicTextBox("", "", "");
          document.getElementById("TextBoxContainer").appendChild(div);
          $(objId).css('display', 'none');
          $(objId).siblings("button.btn-danger").css('display', 'block');
          var id=$(objId).closest('select');
          console.log('id is',id);
          getYears();
      }
  
      function RemoveTextBox(div) {
          $(div).closest("li").remove();
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>In this above code first time after page load user is getting 3 fields <code>i.e-Qualification,College,Passing year fields</code> and the the years in drop down list is coming properly.When user is clicking on <code>+</code> button again another set of 3 fields is generating and in this section user is not getting any year in drop down list.Please help me to add years dynamically in dropdown list which is coming after clicked on <code>+</code> button.Please help me.</p>