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

时间:2018-01-11 04:59:28

标签: javascript jquery html asp.net ajax

单击“保存”按钮。

我们拥有域Doctor,并根据域Modules Doctor Add/View, Doctor/Adddoctor复选框。在Module Doctor / Adddoctor复选框中,我们有一些下拉列表。如果我们选择一些模块,那么应该发送相应的下拉列表值。

但是在我们的代码中,无论是否选中复选框值,它都会获得所有下拉列表。只需要检查模块下拉值。

@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>

开启提交按钮单击功能:

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

点击保存功能:

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 = [];对我们的代码进行排序,无论是否选中复选框值,它都会获得所有下拉列表。

仅需要选中“模块复选框”下拉值。

下面我附上输出屏幕:

Output

Doctor Add/view未选中但会显示下拉值..

1 个答案:

答案 0 :(得分:0)

在此代码中为我工作。此代码中的任何问题请向我发表评论

  just Declare Global Variable;

  var glink=null;
   $(document).ready(function () {
       $('.parent a').click(function () {
           if(glink==null)
            glink = $(this).attr('href');
           var sliptLink = glink.split(',');
           var firstLink = sliptLink[0];
           var secondLink = sliptLink[1];
           /* this code execute when parent has class first  */
           if ($(this).parent().hasClass('first')) {
               $(this).attr('href', sliptLink[0]);
               $(this).parent().removeClass('first');
           } else {
               $(this).attr('href', sliptLink[1]);
               $(this).parent().addClass('first');
               console.log(sliptLink[1]);
           }
       });
   });