<div class="col-lg-3"> Designation <asp:DropDownList ID="ddlDesignation" runat="server" CssClass="form-control" onchange="SelectddlDesignation(this);" AutoPostBack="false"> </asp:DropDownList> </div> <div class="col-lg-3 emp" id="divListEmployees" runat="server"> Employee Name <span style="color: red">*</span> <asp:DropDownList ID="ddlEmployees" runat="server" CssClass="form-control"> </asp:DropDownList> </div> <script type="text/javascript"> function SelectddlDesignation(arg) { var DesignationId = arg.value; if ($('#<%=ddlLocation.ClientID%>').val() != "0") { var DeptValue = $('#<%=ddlDepartment.ClientID%>').val(); var ProjectId = $('#<%=ddlProject.ClientID%>').val(); var ProcessId = $('#<%=ddlProcess.ClientID%>').val(); var LocationId = $('#<%=ddlLocation.ClientID%>').val(); var ClientID = $("#<%=ddlClient.ClientID %>").val(); $('#<%= hdnEmpListID.ClientID %>').val(''); $('#<%=ddlEmployees.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>'); $.ajax({ type: "GET", url: 'AjaxService.aspx?Mode=Designation&DepartmentId=' + DeptValue + '&ClientID=' + ClientID + '&ProjectID=' + ProjectId + '&ProcessID=' + ProcessId + '&LocationID=' + LocationId + '&DesignationID=' + DesignationId, contentType: "application/json; charset=iso-8859-1", dataType: "html", cache: false, success: function (response) { PopulateMultiselectControlDesignation(response, $("#<%=ddlEmployees.ClientID %>")); }, failure: function (response) { $('#<%= hdnEmpListID.ClientID %>').val(''); } }); } else { $('#<%= hdnEmpListID.ClientID %>').val(''); $("#<%=ddlDesignation.ClientID %>").empty(); $("#<%=ddlEmployees.ClientID %>").empty(); } } // To populate multi select option function PopulateMultiselectControlDesignation(list, control) { var jqr = jQuery.noConflict(); jqr("#<%=divListEmployees.ClientID%> .multiSelectOptions").empty(); control.width = jqr("#<%=divListEmployees.ClientID%>").width; $('.multiSelectOptions').width = jqr("#<%=divListEmployees.ClientID %>").width; if (list.length > 0) { var myOptions = jqr.parseJSON(list); control.empty(); jqr.each(myOptions, function () { control.append(jqr("<option></option>").val(this[0]).html(this[1])); }); $.getScript('js/multiselect_withsearch/MultiSearch.js', function () { $.getScript('js/multiselect_withsearch/jquery.multiselect.js', function () { $("#<%=ddlEmployees.ClientID%>").multiselect({ columns: 1, search: true, placeholder: 'Select options' }); $("#<%=ddlEmployees.ClientID%>").multiselect('reload'); }); }); } else { $('#<%= hdnEmpListID.ClientID %>').val(''); control.empty().append('<option selected="selected" value="0">Not available<option>'); } } </script>