title: How can I poupulate a hidden form field with a value from a dropdown?
body: <p>I have these:</p>
  
  <pre><code>$(document).ready(function() {
      getRequestCategories();
  
      $('#requestCategory').change(function() {
          getRequestDescriptions( $(this).val() );
      });
  });
  
  
  function getRequestCategories() {
      $.ajax({
          url: 'getCategories.php',
          dataType: 'json'
      })
      .done(function(categoryInfo) {
          $(categoryInfo).each(function(i, category) {
              $('&lt;option&gt;').val(category.RequestCategoryDisplay).text(category.RequestCategoryDisplay).appendTo( $('#requestCategory') );
          })
      });
  }
  
  
  function getRequestDescriptions(requestCategory) {
      $.ajax({
          url: 'getDescriptions.php',
          dataType: 'json',
          data: { requestCategory: requestCategory }
      })
      .done(function(descriptionInfo) {
          $(descriptionInfo).each(function(i, description) {
              $('&lt;option&gt;').val(description.RequestDescriptionDisplay).text(description.RequestDescriptionDisplay).appendTo( $('#description') );
          })
      });
  }
  
  
  
           Category
            &lt;select name="requestCategory" id="Category" style="width:250px;font-size:10pt;"  class="changeable" data-summary="summCategory"&gt;
             &lt;option value=""&gt;&lt;/option&gt;
            &lt;/select&gt;
          Description
           &lt;select name="description" id="description" style="width:250px;font-size:10pt;"  class="changeable" data-summary="summSubCategory"&gt;
        &lt;option value=""&gt;&lt;/option&gt;
       &lt;/select&gt;
  </code></pre>
  
  <p>How it works currently:</p>
  
  <p>When you select a value from the <code>Category</code> dropdown, all the values associated with your selection are automatically into the <code>description</code> dropdown.</p>
  
  <p>This works fine.</p>
  
  <p>However, we have a new requirement to populate the following hidden form field with user's selection from the <code>description</code> dropdown:</p>
  
  <pre><code>  &lt;input name="RequestID" id="RequestID" type="text"  width="300" value=""  class="changeable" /&gt;
  </code></pre>
  
  <p>In other words, once the <code>description</code> dropdown is populated with values based on selection from <code>Category</code> dropdown, then when a user selects one of the values from the <code>description</code> dropdown, the accompanying value of RequestID should be saved into a hidden form field.</p>
  
  <p>I tried modifying the getDescriptions function but I am not getting the correct values.</p>
  
  <p>Each value I select from the description dropdown gives me same values for RequestID.</p>
  
  <p>Can you please see what I am doing wrong?</p>
  
  <p>Thanks so much in advance.</p>
  
  <pre><code>        function getDescriptions(requestCategory) {
              $.ajax({
                  url: 'getDescriptions.php',
                  dataType: 'json',
                  data: { requestCategory: requestCategory }
              })
              .done(function(descriptionInfo) {
  
              // get number of items in array given by php
              var Desc_count = descriptionInfo.length;
  
              // loop request descriptions
              for (var i = 0; i &lt; Desc_count; i += 1) {
  
                  // append an &lt;option&gt; tag to your &lt;select&gt;
                  $('#description').append('&lt;option value="' + descriptionInfo[i].RequestID + '"&gt;' + descriptionInfo[i].RequestDescriptionDisplay + '&lt;/option&gt;');
              }
  
              // Listen for the value of the &lt;select&gt; to change
              $('#description').on('change', function () {
                  // get the value of the selected option ,the value is the descriptionInfo[i].RequestID
                  var value = $( "#description option:selected").val();
                 // Set the value of the hidden fields based on the &lt;select&gt;'s ID choosing the corret array element
                  $('input[name="RequestID"]').val(value);
              });
          });
  }
  </code></pre>