Cascading DropDownList using jQuery Bootstrap MultiSelect (Multiple Select) Plugin in ASP.Net

Here I have created sample that will help you out.

I have referred below article

AJAX Cascading DropDownList using jQuery in ASP.Net

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        var pageUrl = '<%=ResolveUrl("~/CS.aspx")%>';
        var LastSelectedCity = [];
        $(function () {
            $('#<%=ddlStates.ClientID %>').multiselect({
                includeSelectAllOption: true,
                maxHeight: 200,
                onDropdownHidden: function (event) {
                    var selected = [];
                    $('[id*=ddlStates] option:selected').each(function () {
                        selected.push($(this).val());
                    });
                    var targetDropdown = $('#<%=ddlCities.ClientID %>');
                    var data = '{stateIds: "' + selected.join(',') + '"}';
                    PopulateDropDownList(selected, $(targetDropdown), pageUrl, 'PopulateCities', data);
                }
            });
            $('#<%=ddlCities.ClientID %>').multiselect({
                includeSelectAllOption: true,
                maxHeight: 200
            });
        });

        function PopulateDropDownList(selectedValue, targetDropdown, pageUrl, methodName, data) {
            $(targetDropdown).attr("disabled", "disabled");
            if (selectedValue.length != 0) {
                $('#' + targetDropdown[0].id).multiselect('destroy');
                $(targetDropdown).empty().append('<option selected="selected" value="0">Loading...</option>');
                BindDropdownAfterDestroyed(targetDropdown[0].id);
                $.ajax({
                    type: "POST",
                    url: pageUrl + '/' + methodName,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        PopulateControl(response.d, targetDropdown);
                    },
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            }
        }

        function PopulateControl(list, control) {
            if (list.length > 0) {
                $('#' + control[0].id).multiselect('destroy'); //destroyed Dropdow multielect
                control.removeAttr("disabled");
                control.empty();
                $.each(list, function () {
                    control.append($("<option></option>").val(this['Value']).html(this['Text']));
                });
                if (LastSelectedCity.length != 0) {
                    $(LastSelectedCity).each(function () {
                        $(control).find('option[value="' + $(this)[0] + '"]').attr('selected', true);
                    });
                }
                BindDropdownAfterDestroyed(control[0].id); // Binded MultiSelect to Dropdown
            }
        }

        function BindDropdownAfterDestroyed(dropdownId) {
            $('#' + dropdownId).multiselect({
                includeSelectAllOption: true,
                maxHeight: 200,
                onDropdownHidden: function (event) {
                    $('[id*=' + dropdownId + '] option:selected').each(function () {
                        LastSelectedCity.push($(this).val());
                    });
                }
            });
        }
    </script>
    States :&nbsp;&nbsp;
    <asp:DropDownList ID="ddlStates" runat="server" multiple="multiple" CssClass="multiselect">
    </asp:DropDownList>
    <br />
    <br />
    City :&nbsp;&nbsp;
    <asp:DropDownList ID="ddlCities" runat="server" multiple="multiple" CssClass="multiselect">
    </asp:DropDownList>
    <br />
    <br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.PopulateStates();
    }
}

private void PopulateStates()
{
    String strConnString = ConfigurationManager
        .ConnectionStrings["conString"].ConnectionString;
    String strQuery = "select StateId, StateName from States";
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = strQuery;
            cmd.Connection = con;
            con.Open();
            ddlStates.DataSource = cmd.ExecuteReader();
            ddlStates.DataTextField = "StateName";
            ddlStates.DataValueField = "StateId";
            ddlStates.DataBind();
            con.Close();
        }
    }
}

[System.Web.Services.WebMethod]
public static ArrayList PopulateCities(string stateIds)
{
    Thread.Sleep(2000);
    ArrayList list = new ArrayList();
    String strConnString = ConfigurationManager
        .ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand("GetCities"))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@StateIds", stateIds);
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                list.Add(new ListItem(
                sdr["CityName"].ToString(),
                sdr["CityId"].ToString()
                ));
            }
            con.Close();
            return list;
        }
    }
}

private void PopulateDropDownList(ArrayList list, DropDownList ddl)
{
    ddl.DataSource = list;
    ddl.DataTextField = "Text";
    ddl.DataValueField = "Value";
    ddl.DataBind();
}

protected void Submit(object sender, EventArgs e)
{
    string selectedStatesValues = Request.Form[ddlStates.UniqueID];
    string selectedCitiesValues = Request.Form[ddlCities.UniqueID];
}

VB

Protected Sub Page_Load(sender As Object, e As EventArgs)
	If Not IsPostBack Then
		Me.PopulateStates()
	End If
End Sub

Private Sub PopulateStates()
	Dim strConnString As [String] = ConfigurationManager.ConnectionStrings("conString").ConnectionString
	Dim strQuery As [String] = "select StateId, StateName from States"
	Using con As New SqlConnection(strConnString)
		Using cmd As New SqlCommand()
			cmd.CommandType = CommandType.Text
			cmd.CommandText = strQuery
			cmd.Connection = con
			con.Open()
			ddlStates.DataSource = cmd.ExecuteReader()
			ddlStates.DataTextField = "StateName"
			ddlStates.DataValueField = "StateId"
			ddlStates.DataBind()
			con.Close()
		End Using
	End Using
End Sub

<System.Web.Services.WebMethod> _
Public Shared Function PopulateCities(stateIds As String) As ArrayList
	Thread.Sleep(2000)
	Dim list As New ArrayList()
	Dim strConnString As [String] = ConfigurationManager.ConnectionStrings("conString").ConnectionString
	Using con As New SqlConnection(strConnString)
		Using cmd As New SqlCommand("GetCities")
			cmd.CommandType = CommandType.StoredProcedure
			cmd.Parameters.AddWithValue("@StateIds", stateIds)
			cmd.Connection = con
			con.Open()
			Dim sdr As SqlDataReader = cmd.ExecuteReader()
			While sdr.Read()
				list.Add(New ListItem(sdr("CityName").ToString(), sdr("CityId").ToString()))
			End While
			con.Close()
			Return list
		End Using
	End Using
End Function

Private Sub PopulateDropDownList(list As ArrayList, ddl As DropDownList)
	ddl.DataSource = list
	ddl.DataTextField = "Text"
	ddl.DataValueField = "Value"
	ddl.DataBind()
End Sub

Protected Sub Submit(sender As Object, e As EventArgs)
	Dim selectedStatesValues As String = Request.Form(ddlStates.UniqueID)
	Dim selectedCitiesValues As String = Request.Form(ddlCities.UniqueID)
End Sub

Please refer below article to get dbo.SplitString function

Use Comma Separated (Delimited) string values with IN and WHERE clause in SQL Server

SQL

CREATE PROCEDURE GetCities
      @StateIds VARCHAR(100)
AS
BEGIN
      SELECT CityId, 
	         CityName 
	  FROM Cities
      WHERE StateId IN(
            SELECT CAST(Item AS INTEGER)
            FROM dbo.SplitString(@StateIds, ',')
      )
END

Screenshot