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

时间:2014-03-03 14:51:35

标签: php jquery ajax json

我有这些:

$(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>

目前的工作原理:

当您从Category下拉列表中选择一个值时,与您的选择相关联的所有值都会自动进入description下拉列表。

这很好用。

但是,我们有新要求使用description下拉列表中的用户选择来填充以下隐藏的表单字段:

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

换句话说,一旦description下拉列表填充了基于Category下拉列表中的选择的值,那么当用户从description下拉列表中选择其中一个值时,随附RequestID的值应保存在隐藏的表单字段中。

我尝试修改getDescriptions函数,但是我没有得到正确的值。

我从描述下拉列表中选择的每个值都为RequestID提供了相同的值。

你能看到我做错了吗?

非常感谢。

        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);
            });
        });
}

1 个答案:

答案 0 :(得分:1)

非常奇怪,这不起作用..你的变更事件发生在$(文件).ready()?

我尽力帮助:

$('#description').on('change', function () {事件的instad试试这个:

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

如果这不起作用,请尝试:

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