如何使用下拉菜单中的值填充隐藏的表单字段？

Question

I have these:

$(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) {
            $('<option>').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) {
            $('<option>').val(description.RequestDescriptionDisplay).text(description.RequestDescriptionDisplay).appendTo( $('#description') );
        })
    });
}



         Category
          <select name="requestCategory" id="Category" style="width:250px;font-size:10pt;"  class="changeable" data-summary="summCategory">
           <option value=""></option>
          </select>
        Description
         <select name="description" id="description" style="width:250px;font-size:10pt;"  class="changeable" data-summary="summSubCategory">
      <option value=""></option>
     </select>

How it works currently:

When you select a value from the Category dropdown, all the values associated with your selection are automatically into the description dropdown.

This works fine.

However, we have a new requirement to populate the following hidden form field with user's selection from the description dropdown:

  <input name="RequestID" id="RequestID" type="text"  width="300" value=""  class="changeable" />

In other words, once the description dropdown is populated with values based on selection from Category dropdown, then when a user selects one of the values from the description dropdown, the accompanying value of RequestID should be saved into a hidden form field.

I tried modifying the getDescriptions function but I am not getting the correct values.

Each value I select from the description dropdown gives me same values for RequestID.

Can you please see what I am doing wrong?

Thanks so much in advance.

        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 < Desc_count; i += 1) {

                // append an <option> tag to your <select>
                $('#description').append('<option value="' + descriptionInfo[i].RequestID + '">' + descriptionInfo[i].RequestDescriptionDisplay + '</option>');
            }

            // Listen for the value of the <select> 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 <select>'s ID choosing the corret array element
                $('input[name="RequestID"]').val(value);
            });
        });
}

Answer 1

Very strange this isnt working.. is your on change event happening in $(document).ready() ?

I try to help:

instad of your $('#description').on('change', function () { event try this:

$(document).ready(function() {
    $('#description').change(function() { 
       $('#RequestID').val($(this).val());
    });
});

if this doesnt work try:

$(document).ready(function() {
    $('#description').live('change', function() { 
       $('#RequestID').val($(this).val());
    });
});