Multiple destination, keep rendering sort and Optgroup at the same time?

[Atomixcl]

Hi,
I am new to your plugin and I have not much experience at jQuery, but it it is very nice to use.
I am trying to get a page operating with 3 of your examples at the same time.
I need to order by key, in a 4 multiple destination with opt groups (nested, if posible).
I have made all 3 functional separately but I cannot make it work at the same time.

is this implementation allows it?

<script type="text/javascript"> jQuery(document).ready(function($) { $("#optgroup").multiselect({ fireSearch: function(value) { return value.length > 3; } }); $('#keepRenderingSort').multiselect({ keepRenderingSort: true }); $('#multi_d').multiselect({ right: '#multi_d_to, #multi_d_to_2, #m....... </script>

Thanks in advance!

[crlcu]

Hi @Atomixcl

Basically, the plugin allows you to have as many as needed instances on the same page.
In order to help you, I will need some more code to understand what have you done.

[Atomixcl]

Hi, first, thanks for the quick response.
Second, yes, it allows me to have all instances you may need in the same page, but I need that the same instance will be:

• Outgroup capable (multiple levels if possible, nested outgrop)
• Sort by key (Or not order at all, and preserve the load order)
• Multiple Destination (4) at the same time. (this is already done)
  I am woking in a Wordpress Menu in order to give access to read, write, delete and an "extra" permission, that is why ' are escaped.
  I have removed "all-left and all-right" buttons, in order to save space and omit errors in permits assign.

![schermata 2018-03-23 alle 11 18 45](https://user-images.githubusercontent.com/37634115/37824156-fd6f7dd0-2e8b-11e8-932e-ccfbb505c089.png)

` $html .= '<script type="text/javascript">
jQuery(document).ready(function($) {
$("#optgroup").multiselect({
fireSearch: function(value) {
return value.length > 3;
}
});
$('#keepRenderingSort').multiselect({
keepRenderingSort: true
});
$('#multi_d').multiselect({
right: '#multi_d_to, #multi_d_to_2, #multi_d_to_3, #multi_d_to_4',
rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2, #multi_d_rightSelected_3, #multi_d_rightSelected_4',
leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2, #multi_d_leftSelected_3, #multi_d_leftSelected_4',
search: {
left: ''},

                    moveToRight: function(Multiselect, $options, event, silent, skipStack) {
                        var button = $(event.currentTarget).attr(\'id\');

                        if (button == \'multi_d_rightSelected\') {
                            var $left_options = Multiselect.$left.find(\'> option:selected\');
                            Multiselect.$right.eq(0).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$right.eq(0).find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
                            }
                        }  else if (button == \'multi_d_rightSelected_2\') {
                            var $left_options = Multiselect.$left.find(\'> option:selected\');
                            Multiselect.$right.eq(1).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$right.eq(1).find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
                            }
                        }  else if (button == \'multi_d_rightSelected_3\') {
                            var $left_options = Multiselect.$left.find(\'> option:selected\');
                            Multiselect.$right.eq(2).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$right.eq(2).find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(2));
                            }
                        } else if (button == \'multi_d_rightSelected_4\') {
                            var $left_options = Multiselect.$left.find(\'> option:selected\');
                            Multiselect.$right.eq(3).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$right.eq(3).find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(3));
                            }
                        } 
                    },

                    moveToLeft: function(Multiselect, $options, event, silent, skipStack) {
                        var button = $(event.currentTarget).attr(\'id\');

                        if (button == \'multi_d_leftSelected\') {
                            var $right_options = Multiselect.$right.eq(0).find(\'> option:selected\');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$left.find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } else if (button == \'multi_d_leftSelected_2\') {
                            var $right_options = Multiselect.$right.eq(1).find(\'> option:selected\');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$left.find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } else if (button == \'multi_d_leftSelected_3\') {
                            var $right_options = Multiselect.$right.eq(2).find(\'> option:selected\');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$left.find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } else if (button == \'multi_d_leftSelected_4\') {
                            var $right_options = Multiselect.$right.eq(3).find(\'> option:selected\');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == \'function\' && !silent ) {
                                Multiselect.$left.find(\'> option\').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } 
                    }
                });
            });
            </script>';`

[crlcu]

I'm sorry,
But it's a bit hard to understand the code you have added.
Could you just do a view soruce after your page is rendered, and put that code here?

[Atomixcl]

Sorry, this is the code as it is seen in "source":

`

<div id="primary" class="content-area content-page no-sidebar">
    <header class="page-header"><h1 class="page-title">Permisos</h1></header>		<main id="main" class="site-main" role="main">

<div class="entry-content">

<script type="text/javascript" src="../wp-content/plugins/ccch/plugins/multiselect-master/dist/js/multiselect.min.js"></script>

                <style>
                        .spacer5 {height: 15px;}
                </style><form method="POST" name="go" id="go"><div class="container-fluid">
                <div class="row">
                    <div class="col-xs-4 col-sm-4 col-lg-4"><b>Nombre de Rol </b></div>
                    <div class="col-xs-3 col-sm-3 col-lg-5"><select id="idrol" type="text" name="idrol" onchange="this.form.submit()"><option value=-1>Seleccione un Rol</option><option value="1" selected>Administrador</option><option value="2">Control Calidad</option> <option value="3">Jefe Turno</option> <option value="4">Supervisor</option> </select></div></div><div class="spacer5"></div>
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-lg-3">
                <b>Páginas Disponibles para asignar</b>
                <select name="wpposts[]" id="multi_d" class="form-control" size="35" multiple="multiple"><option style="padding-left:30px"value="56">Planificación y Control</option><option style="padding-left:15px" value="232">Gestión</option><option style="padding-left:30px"value="525">Orden de Producción</option><option style="padding-left:30px"value="529">Aporte Materia Prima</option><option style="padding-left:30px"value="227">Estadística Producción</option><option style="padding-left:30px"value="283">Estadística Productiva</option><option style="padding-left:30px"value="411">Control Deuda Weekly</option><option style="padding-left:30px"value="364">Control Deuda</option><option style="padding-left:30px"value="662">Stock Clientes</option><option style="padding-left:30px"value="665">Informe Semanal</option><option style="padding-left:30px"value="397">Guía a Softland</option><option style="padding-left:30px"value="60">Producción</option><option style="padding-left:15px" value="372">Rollos</option><option style="padding-left:15px" value="676">Jefe Turno</option><option style="padding-left:15px" value="422">Calendario de Operación</option><option style="padding-left:15px" value="646">Estadísticas</option><option style="padding-left:30px"value="62">Control Calidad</option><option style="padding-left:15px" value="587">Gestión</option><option style="padding-left:30px"value="607">Clasificación Alambrón</option><option style="padding-left:30px"value="600">Control Orden de Produccion</option><option style="padding-left:30px"value="585">Estadística Ensayos</option><option style="padding-left:30px"value="320">Rechazo Rollo</option><option style="padding-left:30px"value="709">Recepción y Despacho</option><option style="padding-left:15px" value="697">Recepción Diaria</option><option style="padding-left:15px" value="702">Despacho Diario Exportación</option><option style="padding-left:30px"value="670">Bodega</option><option style="padding-left:15px" value="672">Consumos</option><option style="padding-left:30px"value="429">Maestros</option><option style="padding-left:15px" value="507">Clientes</option><option style="padding-left:30px"value="431">Clientes</option><option style="padding-left:30px"value="439">Cliente Final</option><option style="padding-left:30px"value="442">Otros Clientes</option><option style="padding-left:15px" value="510">Precios</option><option style="padding-left:30px"value="451">Precio Maquila</option><option style="padding-left:30px"value="449">Precio Embalaje</option><option style="padding-left:15px" value="512">Códigos</option><option style="padding-left:30px"value="464">Causas Detenciones</option><option style="padding-left:30px"value="480">Motivos Rechazos</option><option style="padding-left:30px"value="474">Embalaje</option><option style="padding-left:30px"value="478">Mercado</option><option style="padding-left:30px"value="489">Materia Prima</option><option style="padding-left:30px"value="487">Subproductos</option><option style="padding-left:30px"value="485">Secciones</option><option style="padding-left:30px"value="493">Operador Horno</option><option style="padding-left:15px" value="679">Usuarios</option><option style="padding-left:30px"value="683">Usuarios</option><option style="padding-left:30px"value="694">Roles</option><option style="padding-left:30px"value="685">Permisos</option><option style="padding-left:15px" value="514">Correos</option><option style="padding-left:30px"value="457">Correo Distribución</option><option style="padding-left:30px"value="460">Correo Distribución SGNet</option><option style="padding-left:15px" value="491">Turnos</option><option style="padding-left:15px" value="468">Departamentos</option><option style="padding-left:15px" value="472">Documentos</option><option style="padding-left:15px" value="604">Parametros Calidad</option><option style="padding-left:15px" value="657">Objetivos Metas</option><option style="padding-left:15px" value="651">Launcher</option><option style="padding-left:15px" value="445">Usabilidad</option><option style="padding-left:15px" value="522">Tablas</option><option style="padding-left:15px" value="717">tv</option><option style="padding-left:30px"value="539">Login</option></select>
            </div>
            <div class="col-xs-1 col-sm-1 col-lg-1">
            </div>
            <div class="col-xs-8 col-sm-8 col-lg-8">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12"><b>Permiso Especial</b></div>
                    <div class="col-xs-6">
                        <button type="button" id="multi_d_rightSelected" class="btn btn-default btn-block"> > </button>
                        <button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block"> < </button>
                    </div>
                    <div class="col-xs-6">
                        <select name="special[]" id="multi_d_to" class="form-control" size="8" multiple="multiple"></select>
                    </div>
                </div>
                <div class="row">
                        <div class="col-xs-12 col-sm-12 col-lg-12"><b>Permiso Borrado</b></div>
                        <div class="col-xs-6">
                            <button type="button" id="multi_d_rightSelected_2" class="btn btn-default btn-block"> > </button>
                            <button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block"> < </button>
                        </div>
                        <div class="col-xs-6">
                            <select name="delete[]" id="multi_d_to_2" class="form-control" size="8" multiple="multiple"></select>
                        </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12"><b>Permiso de Escritura</b></div>
                    <div class="col-xs-6">
                        <button type="button" id="multi_d_rightSelected_3" class="btn btn-default btn-block"> > </button>
                        <button type="button" id="multi_d_leftSelected_3" class="btn btn-default btn-block"> < </button>
                    </div>
                    <div class="col-xs-6">
                        <select name="write[]" id="multi_d_to_3" class="form-control" size="8" multiple="multiple"></select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12"><b>Permiso de lectura</b></div>
                    <div class="col-xs-6">
                        <button type="button" id="multi_d_rightSelected_4" class="btn btn-default btn-block"> > </button>
                        <button type="button" id="multi_d_leftSelected_4" class="btn btn-default btn-block"> < </button>
                    </div>
                    <div class="col-xs-6">
                        <select name="read[]" id="multi_d_to_4" class="form-control" size="8" multiple="multiple"></select>
                    </div>
                </div>
            </div>
        </div>
    </div><script type="text/javascript">
                jQuery(document).ready(function($) {
                    $("#optgroup").multiselect({
                        fireSearch: function(value) {
                            return value.length > 3;
                        }
                    });
                    $('#keepRenderingSort').multiselect({
                        keepRenderingSort: true
                    });
                $('#multi_d').multiselect({
                    right: '#multi_d_to, #multi_d_to_2, #multi_d_to_3, #multi_d_to_4',
                    rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2, #multi_d_rightSelected_3, #multi_d_rightSelected_4',
                    leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2, #multi_d_leftSelected_3, #multi_d_leftSelected_4',
                    search: {
                        left: '<input type="text" name="q" class="form-control" placeholder="Buscar..." />'},

                    moveToRight: function(Multiselect, $options, event, silent, skipStack) {
                        var button = $(event.currentTarget).attr('id');

                        if (button == 'multi_d_rightSelected') {
                            var $left_options = Multiselect.$left.find('> option:selected');
                            Multiselect.$right.eq(0).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
                            }
                        }  else if (button == 'multi_d_rightSelected_2') {
                            var $left_options = Multiselect.$left.find('> option:selected');
                            Multiselect.$right.eq(1).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
                            }
                        }  else if (button == 'multi_d_rightSelected_3') {
                            var $left_options = Multiselect.$left.find('> option:selected');
                            Multiselect.$right.eq(2).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$right.eq(2).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(2));
                            }
                        } else if (button == 'multi_d_rightSelected_4') {
                            var $left_options = Multiselect.$left.find('> option:selected');
                            Multiselect.$right.eq(3).append($left_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$right.eq(3).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(3));
                            }
                        } 
                    },

                    moveToLeft: function(Multiselect, $options, event, silent, skipStack) {
                        var button = $(event.currentTarget).attr('id');

                        if (button == 'multi_d_leftSelected') {
                            var $right_options = Multiselect.$right.eq(0).find('> option:selected');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } else if (button == 'multi_d_leftSelected_2') {
                            var $right_options = Multiselect.$right.eq(1).find('> option:selected');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } else if (button == 'multi_d_leftSelected_3') {
                            var $right_options = Multiselect.$right.eq(2).find('> option:selected');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } else if (button == 'multi_d_leftSelected_4') {
                            var $right_options = Multiselect.$right.eq(3).find('> option:selected');
                            Multiselect.$left.append($right_options);

                            if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
                                Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
                            }
                        } 
                    }
                });
            });
            </script><div class="modal-footer">
                                <button type="submit" name="Permits" value="Dismiss" class="btn btn-secondary">Cancelar</button>
                                <button type="submit" name="Permits" value="Save" class="btn btn-danger">Guardar</button>
                            </div></form>
</div><!-- .entry-content -->`