Ajax/JQueryで塗りつぶしたドロップダウンを使用して、別のサーバー側の呼び出しがなくてもUIを動的に変更したい

Question

ドロップダウンに値するajax postメソッドがあります。今はオブジェクトの説明を返していますが、選択肢のIDでテキストボックスを更新することもできます。選択を変更するたびに、AJAXメソッドを実行せずに、このテキストボックスを対応するIDおよび説明に変更します。 は、ここでは、コードです：

function fillCheckRunDD() { 
$.ajax({ 
    url: './PayInvoicesWS.asmx/GetCheckRuns', 
    data: "{}", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    type: "POST", 
    success: function (data) { 
     var checkRunData = data.d; 

     $crid = ("#CheckRunID"); 
     $crid.val(checkRunData.CheckRunID); 
     $dd = $("#check_run_dropdown"); 

     $.each(checkRunData, function (index, value) { 
      $dd.append("<option value='" + value.CheckRunID + "'>" + value.Description + "</option>"); 
     }); 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
     sendErrorEmail(window.location.href, 'FillCheckRunDD', XMLHttpRequest); 
    } 
}); 

}

はここ.change機能だ - 今、それだけで説明が更新されます。私はそれをテキストボックスに表示する方法を理解できません。

$("#check_run_dropdown") 
       .change(function() { 
        var optionChange = $('#check_run_dropdown option:selected').text(); 
        $('#CheckRunDescription').val(optionChange); 
        $('#CheckRunDescription').prop("disabled", false); 
        $("#vendor_payment_type").prop("disabled", false); 
        $("#vendor").prop("disabled", false); 

       }); 

これは、プルダウンを入力する最初のサーバーサイドコードです。

public static IEnumerable<CheckRun> GetCheckRuns() 
    { 
     using (MiniProfiler.Current.Step("GetCheckRuns()")) 
     using (var context = rempscoDataContext.CreateReadOnlyContext()) 
     { 
      return (
       from cr in context.check_runs 
       where cr.check_run_approval_status == 1 
       select new CheckRun 

       { 
        CheckRunID = cr.check_run_id, 
        Description = cr.description, 
        CheckRunApprovalStatus = cr.check_run_approval_status 
       }).ToList(); 
     } 
    } 

ここでも、私がやっていることのちょっとしたスクリーンショットがあります。

私はこれに助けていただきありがとうございます。ありがとうございました。

$("#check_run_dropdown").change(function() { 
    var optionChange = $('#check_run_dropdown option:selected').text(); 
    $('#CheckRunDescription').val(optionChange); 
    $('#CheckRunId').val($(this).val()); 
    $('#CheckRunDescription').prop("disabled", false); 
    $("#vendor_payment_type").prop("disabled", false); 
    $("#vendor").prop("disabled", false); 
}); 

また、変化には良い考えかもしれません -

Answer 1

あなたはあなたが名前のテキストボックスCheckRunIdあなたがこれを行うことができますを持っていると仮定すると、選択したオプションの値を取得するために選択ボックスに.val()を使用することができますこの -

var optionChange = $('#check_run_dropdown option:selected').text(); 

へ -

var optionChange = $('option:selected', this).text(); 

は、変更されたthisで選択されたオプションを探します。

あなたはグローバル変数に配列を救うことができる元の配列を再利用したい場合は -

var checkRunData; 

function fillCheckRunDD() { 
$.ajax({ 
    url: './PayInvoicesWS.asmx/GetCheckRuns', 
    data: "{}", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    type: "POST", 
    success: function (data) { 
     checkRunData = data.d; 

     $crid = ("#CheckRunID"); 
     $crid.val(checkRunData.CheckRunID); 
     $dd = $("#check_run_dropdown"); 

     $.each(checkRunData, function (index, value) { 
      $dd.append("<option value='" + value.CheckRunID + "'>" + value.Description + "</option>"); 
     }); 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
     sendErrorEmail(window.location.href, 'FillCheckRunDD', XMLHttpRequest); 
    } 
}); 

が次にあなたがそうのようなあなたの変更機能にアクセスすることができます -

$("#check_run_dropdown").change(function() { 
    var optionChange = $('option:selected', this).index(); 
    $('#CheckRunDescription').val(checkRunData[optionChange].Description); 
    $('#CheckRunId').val(checkRunData[optionChange].CheckRunId); 
    $('#CheckRunDescription').prop("disabled", false); 
    $("#vendor_payment_type").prop("disabled", false); 
    $("#vendor").prop("disabled", false); 
});