如何从选中的复选框获取多个下拉值？

Question

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.

Below I attached output screen:

Doctor Add/view Unchecked but dropdown value is displayed ..

Answer 1

in this code is working for me . anything issues in this code please comment to me

var permission = [];
            for (var i = 0; i < ids.length; i++) {
                var item = ids[i];
                var select4 = 'select.' + item;
                permission.push($(select4).find('option:selected').val())
            }

            alert(permission);