Jquery級聯下拉如何觸發鏈中所有下拉菜單的更改事件序列號

Question

我的應用程序中有以下jQuery代碼，它驅動四個級聯下拉菜單。我在網上看到很多例子，強迫用戶通過添加' - 選擇一個值---'選項來選擇一個值。但是，我想要做的是，對於下拉菜單，如果其中一個更改，則會按順序自動更新。

更新2,3,4如果1點的變化和3,4-如果2變化等

Dropdown1中心Dropdown2地理Dropdown3燮Dropdown4的Emp

這是jQuery代碼我有：

$(function() { 
     $('#divParentaccordion').accordion({ autoHeight: false }).accordion({  collapsible: true }); 
     $('#divGenericaccordion').accordion({ autoHeight: false }).accordion({ collapsible: true }); 
     $('#<% =ddCenter.ClientID %>').change(getGeo()); 
     $('#<% =ddGeo.ClientID %>').change(getSup()); 
     $('#<% =ddSup.ClientID %>').change(getEmp()); 
     // Statements i assume should call the function when the event triggers     
    }) 


    function getGeo() { 
     $.ajax({ 
      type: "POST", 
      url: "./ObservationsReport.aspx/GetGeoList", 
      data: "{center: '" + $('#<% =ddCenter.ClientID %>').val() + "'}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(response) { 
       var geos = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d; 
       $('#<% =ddGeo.ClientID %>').removeOption(/./); 
       for (var i = 0; i < geos.length; i++) { 
        var val = geos[i].Code; 
        var text = geos[i].Description; 
        $('#<% =ddGeo.ClientID %>').addOption(val, text); 
       } 

      } 
     }) 
    } 

    function getSup() { 
     var center = $('#<% =ddCenter.ClientID %>').val(); 
     var geo = $('#<% =ddGeo.ClientID %>').val(); 
     $.ajax({ 
      type: "POST", 
      url: "./ObservationsReport.aspx/GetSupList", 
      data: "{center:'" + center + "',geo:'" + geo + "'}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(response) { 
       var sups = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d; 
       $('#<% =ddSup.ClientID %>').removeOption(/./); 
       for (var i = 0; i < sups.length; i++) { 
        var val = sups[i].SOPId; 
        var text = sups[i].Name; 
        $('#<% =ddSup.ClientID %>').addOption(val, text); 
       } 
      } 
     }) 
    } 

    function getEmp() { 
     var center = $('#<% =ddCenter.ClientID %>').val(); 
     var geo = $('#<% =ddGeo.ClientID %>').val(); 
     var sup = $('#<% =ddSup.ClientID %>').val(); 
     $.ajax({ 
      type: "POST", 
      url: "ObservationsReport.aspx/GetEmpList", 
      data: "{center:'" + center + "',geo:'" + geo + "',sup:'" + sup + "'}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(response) { 
       var emps = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d; 
       $('#<% =ddEmp.ClientID %>').removeOption(/./); 
       for (var i = 0; i < emps.length; i++) { 
        var val = emps[i].Sop_Id; 
        var text = emps[i].Name; 
        $('#<% =ddEmp.ClientID %>').addOption(val, text); 
       } 
      } 
     }) 
    } 

我在做什麼錯？我最近開始用jQuery編程;仍然不完全熟悉它如何處理事件和時間。請，任何幫助將不勝感激。

Answer 1

我覺得你的問題是，你希望從Ajax調用一箱的人口來觸發選擇的onchange。不是這種情況。通過javascript更改不會觸發onchange。你需要自己解鎖onchange。

例如，嘗試改變getGeo這樣：

function getGeo() { 
     $.ajax({ 
      type: "POST", 
      url: "./ObservationsReport.aspx/GetGeoList", 
      data: "{center: '" + $('#<% =ddCenter.ClientID %>').val() + "'}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(response) { 
       var geos = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d; 
       $('#<% =ddGeo.ClientID %>').removeOption(/./); 
       for (var i = 0; i < geos.length; i++) { 
        var val = geos[i].Code; 
        var text = geos[i].Description; 
        $('#<% =ddGeo.ClientID %>').addOption(val, text); 
       } 

       // *** CALL getSup directly *** 
       getSup() ; 

      } 
     }) 
    } 

這裏的關鍵是要getSup顯式調用，因爲它不會被觸發onchange。