Get multiple DropDownList selected values based on checked CheckBox using JQuery

On click save button.

We have Domain Doctor and based on domain we have Modules like Doctor Add/View, Doctor/Adddoctor checkbox. Inside Module Doctor/Adddoctor checkbox we having some dropdown list.In case we select some Module then corresponding drop down list value should be send.

But in our code it getting all the drop down vale with or without choosing the check box value. Only checked module drop down value is required.

@model MedeilMVC_CLOUD.Models.UserView
<script type="text/javascript">
    function GetSelectedDomainValue(DomainID) {
        var adminID = jQuery('[id$=hdnAdminID]').val();
        var roleID = $("#RoleID").val();
        var domainID = $("#DomainID").val();
        //$("#Doamin").remove();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("BindDomainUserAccess")',
            dataType: 'json',
            data: { RoleID: roleID, DomainID: domainID, AdminID: adminID },
            success: function (data) {
                var html = '';

                $.each(data.DomainUserViews, function (index, item) {

                    html += '<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.DomainID + "' name='DomainUserViews' class='DomainUserViews' />" + " " + item.DomainName + '</a>'

                    html += '<ul id="tree" class="dd-list">'

                    $.each(data.ModuleUserViews, function (index, item) {
                        if (item.ParentModuleID == -1) {

                            item.ModuleName = item.ModuleName
                        }
                        else {
                            item.ModuleName = item.ModuleName + " / " + item.Url
                        }

                        html += '<li class="dd-item"><a href="#">' + "<input type='checkbox' id='" + item.ModuleID + "' name='ModuleUserViews' class='ModuleUserViews' />" + " " + item.ModuleName + '<br />' + '</a>'
                            + '<select class="select2-arrow permission" id="'+ item.ModuleID +'" name="Permission" style="width: 55% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option value="F">All Permissions</option>'
                            + '<option value="P">Add/Update Only</option>'
                            + '<option value="R">Read Only</option>'
                            + '</select>'
                            + '<br />'
                            + '<select class="select2-arrow" id="ApprovalTo" name="ApprovalTo" style="width: 80% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option Value="-1" Text="IntialApproval">Initial Approval Option1</option>'
                            + '</select>'
                            + '<br />'
                            + '<select class="select2-arrow" id="InitialApproval2" name="InitialApproval2" style="width: 80% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option Value="-1" Text="IntialApproval2">Initial Approval Option2</option>'
                            + '</select>'
                            + '<br />'
                            + '<select class="select2-arrow" id="InitialApproval3" name="InitialApproval3" style="width: 80% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option Value="-1" Text="IntialApproval3">Initial Approval Option3</option>'
                            + '</select>'
                            + '<br />'
                            + '<select class="select2-arrow" id="FinalApproval" name="FinalApproval" style="width: 80% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option Value="-1" Text="FinalApproval">Final Approval Option1</option>'
                            + '</select>'
                            + '<br />'
                            + '<select class="select2-arrow" id="FinalApproval2" name="FinalApproval2" style="width: 80% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option Value="-1" Text="FinalApproval2">Final Approval Option2</option>'
                            + '</select>'
                            + '<br />'
                            + '<select class="select2-arrow" id="FinalApproval3" name="FinalApproval3" style="width: 80% !important; border: 1px solid #0c0b0b4f;margin-left: 10px;margin-top: 10px;">'
                            + '<option Value="-1" Text="FinalApproval3">Final Approval Option3</option>'
                            + '</select>'
                            + '</li>'

                    });

                    html += '</ul></li>'
                });

                if (html != '') {
                    html = '<ul id="tree" class="dd-list">' + html + '</ul>'
                }

                $('.dd-list').html(html);

            },
            error: function (ex) {
                alert('Failed to retrieve Sub Categories : ' + ex);
            }
        });
    }
</script>

<div class="col-lg-12" id="Doamin">
    <div class="row">
        <div class="col-md-6">
            <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
                <ul id="tree" class="dd-list"></ul>
            </div>
        </div>
    </div>
</div>

On Submit button Click Function:

<input type="submit" name="actionType" id="btnSubmit" onclick="AssignUserAccess()" value="Save" class="btn btn-rounded btn-inline btn-success" />

Onclick Save Function:

        function AssignUserAccess() {
            //DomainUserViews Checked Count
            var $checked = $('.dd-list').find('.DomainUserViews:checked');
            var domainIDS = [];
            $checked.each(function (index) { domainIDS.push($(this).attr("id")); })

            //ModuleUserViews Checked Count
            var $Modulechecked = $('.dd-list').find('.ModuleUserViews:checked');
            var ids = [];
            $Modulechecked.each(function (index) { ids.push($(this).attr("id")); })

            var domainID = $("#DomainID").val();
            var adminID = $("#hdnAdminID").val();
            var roleID = $("#RoleID").val();


            var permission = [];

            permission = $('select.permission').map(function () {
                return $(this).find('option:selected').val();
            }).toArray();

            alert(permission);


            $.ajax({
                type: 'POST',
                url: '@Url.Action("UserDomains")',
                dataType: 'json',
                cache: false,
                data: { Domains: domainIDS, Modules: ids, DomainID: domainID, AdminID: adminID, RoleID: roleID, Permission: permission },
                traditional: true,
                success: function (data) {
                    if (data.success) {

                    }
                },
                error: function (ex) {
                    alert('Failed to retrieve Sub Categories : ' + ex);
                }
            });
        }

var permission = []; Array our code it getting all the drop down vale with or without choosing the check box value.

Only checked Module Checkbox drop down value is required.