cascading dropdown

In this session I am insert the user with some kind of details and update the details.

now my problem is that, when I am change the Zone value then State and branch value removed same case for update case. please see the image for reference.(Getting all value as per zone in state and branch)

 

 

 

now what I need that,when I change the value of zone then textbox will reset with its value i.e. Select State and same for branch

while in update case need same.

my code as below

$('#ddlZone').on('change', function () {

var ZoneCode = $('#ddlZone option:selected').val();

debugger;

fillState(ZoneCode, -1);

});

// On State change event Branch Append

$('#ddlState').on('change', function () {

var StateCode = $('#ddlState option:selected').val();

debugger;

fillBranch(StateCode, -1);

});

function fillState(ZoneCode, StateCode) {

$('#ddlBranch option').remove;

$.ajax({

type: 'GET',

data: { ZoneCode: ZoneCode },

url: "/Admin/loadStates",

success: function (result) {

var s = 'Select State ';

for (var i = 0; i < result.length; i++) {

s += '' + result[i].StateName + '';

}

//if (StateCode.toString() != "0")

$('#ddlState').html(s);

$('#ddlState').val(StateCode);

}

});

}

function fillBranch(StateCode, BranchCode) {

$.ajax({

type: 'GET',

data: { StateCode: StateCode },

url: "/Admin/loadBranch",

success: function (result) {

var s = 'Select Branch ';

for (var i = 0; i < result.length; i++) {

s += '' + result[i].BranchName + '';

}

$('#ddlBranch').html(s);

// if (BranchCode.toString() != "0")

$('#ddlBranch').val(BranchCode);

}

});

}