Jquery dropdown onchange issue

Question

I have two dropdowns which are populating dynamically from mysql. One for banks and other one for branches. If bank dropdown change,it's banches data should be display in branch dropdown. Here I have used two separate functions to do this job and these are ok and working nicely.

This is how I defined these two functions:

function Banks($selecter, selected) {
 // my stuff ----
}
function Branches($selecter, bid, selected) {
 // my stuff ----
}

My problem is now I have set a default value for bank dropdown to display when document is ready. But its branches data is not populating. But when I changing data from bank its working.

This is how I tried it:

  var bankReg = $('#DropDownEdit').data('id'); 
  var branchReg = $('#branchDropDown').data('id2'); 
  Banks($('#DropDownEdit'), bankReg);
  $(document).on('change', '#DropDownEdit', function(){
    var bankID = $("#DropDownEdit").val(); 
    Branches($('#branchDropDown'), bankID, branchReg); 
  });

UPDATE: 

my Banks function:

function Banks($selecter, selected) {  
  $selecter.empty(); 
  $selecter.append('<option>Loadding.....</option>');
  $selecter.append("<option value=''>--- Select Bank ---</option>"); 
  $.ajax({
    type: "post",
    url: "includes/process_bank_dropdown_populate_ajax.php", 
    contentType: "application/json; charset-utf-8",
    dataType: "json",
    success: function(data) {
      $selecter.empty();
      $selecter.append("<option value=''>--- Select Bank ---</option>");
      $.each(data, function(i,item){
        var selecting; 
        if (selected === data[i].bankID) {
          selecting = ' selected="selected"'; 
        } else {
          selecting = '';
        }
        $selecter.append('<option '+selecting+' value="'+data[i].bankID+'">'+data[i].bank+'</optoin>');
      });
    }, 
    complete: function() {}
  }); 
}

Can anybody tell me how I get this to work? Thank you.

Answer 1

您可以触发更改后的银行以执行您想要的操作，只需在填充默认银行后调用它，它将像您手动选择银行一样触发。

    $("#bankDropDownEdit").change();

Answer 2

在文档加载时，首先隐藏两个列表，然后获取默认银行的分支并填充列表，然后在回调函数中使两个列表都出现

Answer 3

when you assign the value to dropdown it will not call any change event, while you select from dropdown then this event will fire.

after assign value to dropdown call change event

$("#bankDropDownEdit").change();

Answer 4

Without seeing your code, I can only give you a thread to solve the problem.

Call the Branches method inside Banks method.

function Banks($selecter, selected) {
 // my stuff ----

 // Put this inside ajax success callback as last statements
 var bankID = $("#DropDownEdit").val(); // Check this value available here or take value from success callback directly.
 var branchReg = $('#branchDropDown').data('id2'); // Check this value available here or take value from success callback directly.
 Branches($('#branchDropDown'), bankID, branchReg);

}

Here bankID and branchReg are default selected values. These work, if scope can accessed for above variables inside Banks method.