Javascript 在jqgrid编辑中动态刷新多选下拉列表

我试图在jqgrid edit中动态填充一个多选下拉列表。jqgrid有两个下拉列表，即role和roletype。角色类型选项应根据在角色中选择的选项进行更改。但是，尽管ajax调用在role下拉更改事件中获得新值，roletype不会刷新。代码如下：

var selRoleVal;

var mygrid = $("#MyGrid"),
         ...
   , getRoleTypes = function () {
        var roleTypeData;

        $.ajax({
            type: "POST",
            url: "Page/GetDefinitions",               
            data: "{'roleID': '" + selRoleVal + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (json) {
                roleTypeData = json;
            },
            error: function (json) {
                alert("Failed ...");
            }
        });
        return roleTypeData;

    }

    , setRoleTypeValues = function (role) {

        mygrid.jqGrid('setColProp', 'RoleType', {
            editoptions: {
                value: function (elem) {
                   var roleTypeData;

                    roleTypeData = getRoleType();
                    return roleTypeData;
                }
                , recreateForm: true

            }

        });

    };



mygrid.jqGrid({
        ...,            
        colNames: ['ID', 'Role', 'Role Type'],
        colModel: [
                    { name: 'id', index: 'id', width: 20, editable: false,     editoptions: { readonly: true, size: 1 } },                        
                    {
                        name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                        searchoptions: {
                            value: RoleList
                        },
                        editoptions: {
                            value: RoleList,
                            dataInit: function (elem) {
                                selRoleVal = $(elem).val();
                            },
                            dataEvents: [{
                                type: 'change',
                                fn: function (e) {
                                     selRoleVal = $(e.target).val();
                                    setRoleTypeValues($(e.target).val());
                                 }
                            }]

                        }
                    },
                    {
                        name: 'RoleType', index: 'RoleType', width: 100, sortable: true, editable: true, edittype: "select", 
                         editoptions: {
                             value: getRoleType
                                 ,
                            dataInit: function (elem) {
                                    $(elem).multiselect({
                                        minWidth: 80, 
                                        height: 200,
                                        selectedList: 10,
                                        checkAllText: "Check all",
                                        uncheckAllText: "Uncheck all",
                                        noneSelectedText: "Any",
                                        open: function () {
                                            var $menu = $(".ui-multiselect-menu:visible");
                                            $menu.width("auto");
                                            return;
                                        }


                                    })

                                    $(elem).multiselect('refresh');

                            },
                            multiple: true
                        }
                    }

        ],
        rowNum: 20,
        rowList: [20, 40, 60],
        ...
        editurl: ...

        ....

    }).jqGrid('navGrid', '#MyPager', {
        ....
        , edit: true
        , add: true
        , del: true
        , search: false
        , recreateForm: true 
    })

---

刷新角色类型下拉列表应该包括哪些内容？

查看的讨论部分的第一项，它演示了如何从角色选择中引用角色类型选择。试试这样的

setRoleTypeValues = function (roleSelect, role) {

    var roleTypeSelect = roleSelect.closest("tr").find("select#RoleType");
    roleTypeSelect.empty().html(roleTypeDataOptionsAsHtml); 
    roleTypeSelect.multiselect('refresh');
    });

};

               {
                    name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                    searchoptions: {
                        value: RoleList
                    },
                    editoptions: {
                        value: RoleList,
                        dataInit: function (elem) {
                            selRoleVal = $(elem).val();
                        },
                        dataEvents: [{
                            type: 'change',
                            fn: function (e) {
                                 selRoleVal = $(e.target).val();
                                setRoleTypeValues($(e.target), $(e.target).val());
                             }
                        }]

                    }
                },

---

希望这是有道理的

谢谢你的回复。我正在使用multiselect小部件。我尝试了您建议的方法，在角色列的dataevents中构建一个selectHTML；但是，下拉列表没有刷新。也许，这与找到控制权的方式有关。我使用了var roleTypeCtrl=$selectRoleType；roleTypeCtrl.empty.htmlroleTypeOptions；这将起作用，但我选择使用roleSelect.closesttr.findselectretype；因为可以同时编辑两行。无法找到正确的控件。因此使用了var rowid=mygrid.jqGrid'getGridParam'，'selrow'$选择[id='+rowid+\u角色类型'].empty.appendroleTypeOptions.multiselect；根据firefox firebug获取正确的元素。谢谢你的主意！！可能必须使用$e.target[0]才能找到正确的tr，但您的方法有效。。。