Multi select dropdown using jquery JTable library

Question

I am using jquery JTable library to create a form in php. Now I want to create a dynamic dropdown with multiple select options.How I will do ?

Answer 1

You can add attribute multiple and change the name attribute as name[] on click event.

setTimeout(function(){$('.jtable-command-column').click(function(){
     $(".access_country").attr('multiple','multiple');
     $(".access_country").attr('name','country_id[]');
      })},5000);

Here jtable-command-column is edit button class. I am just firing event on click on it. And adding attribute "multiple" and changing attribute name as country_id[].

This is working fine.

Answer 2

A little more elegant solution for the multiselect dropdown menu in jTable would be attaching an jtable formCreated event when adding a new record to the table like this:

formCreated: function(event, data){
                            //console.log('formCreated event fired: ',event, data);
                            if(data.formType === "create"){
                                var select = data.form.find('select');//your select id here
                                var selectName = select.prop('name');
                                select.prop('multiple', "multiple");
                                select.prop('name', selectName+"[]");

                            }
                        }

There is one drawback (or more, beside the special handling on the server side) to the multiselect solution, and is that the returned json object only can carry just one row record. The solution to this is to reload the table (or child table) after the row was added using the recordAdded event:

recordAdded: function(event, data){
                            $(event.target).jtable('reload');
                        }