Is it possible to add headings to a jEditable select drop down

Question

Is it possible to add headings to a jEditable select drop down?

I want to add headings to data sets in a single select.

This would be the equivalent to OPTGROUP in an HTML select.

If this possible?

If so how?

If not, any ideas where I'd start to extend to to allow this?

score 0 · Answer 1 · answered Sep 14 '12 at 10:54

If you use jEditable in it's pure downloaded form, you cannot implement option grouping within the select. On the other hand, jEditable isn't such a complicated java file, and you might want to try to add in an option to insert OPTGROUP tags:

maybe something that looks like :

            $("#ddlGrouped").editable("url", {
            type: 'select',
            submit: 'OK',
            data: {
                   'Swedish Cars' : { 'volvo': 'Volvo', 'saab': 'Saab'},
                   'German Cars' : { 'mercedes': 'Mercedes', 'audi': 'Audi'}
                  }
        })

Here's the part of jEditable that builds the select:

select: {
            element: function (settings, original) {
                var select = $('<select />');
                $(this).append(select);
                return (select);
            },
            content: function (data, settings, original) {
                /* If it is string assume it is json. */
                if (String == data.constructor) {
                    eval('var json = ' + data);
                } else {
                    /* Otherwise assume it is a hash already. */
                    var json = data;
                }
                for (var key in json) {
                    if (!json.hasOwnProperty(key)) {
                        continue;
                    }
                    if ('selected' == key) {
                        continue;
                    }
                    var option = $('<option />').val(key).append(json[key]);
                    $('select', this).append(option);
                }
                /* Loop option again to set selected. IE needed this... */
                $('select', this).children().each(function () {
                    if ($(this).val() == json['selected'] ||
                        $(this).text() == $.trim(original.revert)) {
                        $(this).attr('selected', 'selected');
                    }
                });
            }
        }

But you'd also have to check how jEditable gets the selected item, and maybe adapt that code too. Sounds like fun to do, but at the moment I don't have the time to try it out and post the working code.

Good luck.

score 0 · Answer 2 · answered Sep 30 '12 at 17:55

Based on Rafael's answer I had a go at creating this tonight and have it working for my purpose. Please note I didn't make this flexible, I've just hacked it for my purposes (2 OPTGROUP, always the same headings). Also I don't actually know how to program in JS (as you'll see) so this is just posted as a working solution, certainly not best practice.

Very happy for people to point out the mistakes in my code also - just posted here incase someone else comes across the same issue.

Updates to jeditable below - call to this is as described in Rafael's post (except type is "selectactioner".

        selectactioner: {
           element : function(settings, original) {
                var select = $('<select />');
                $(this).append(select);
                return(select);


            },
            content : function(data, settings, original) {

               var obj = jQuery.parseJSON(data);
               var json = obj.attendees;
               var json2 = obj.nonattendees;

                var optgroup = $('<optgroup />');
                optgroup.attr('label', 'Meeting Attendees');
                $('select', this).append(optgroup);

                for (var key in json) {
                    if (!json.hasOwnProperty(key)) {
                        continue;
                    }
                    if ('selected' == key) {
                        continue;
                    } 
                    var option = $('<option />').val(key).append(json[key]);
                    $('select', this).append(option);    
                }                    
                /* Loop option again to set selected. IE needed this... */ 
                $('select', this).children().each(function() {
                    if ($(this).val() == json['selected'] || 
                        $(this).text() == $.trim(original.revert)) {
                            $(this).attr('selected', 'selected');
                    }
                });




                var optgroup = $('<optgroup />');
                optgroup.attr('label', 'Other Users');
                $('select', this).append(optgroup);

                for (var key in json2) {
                    if (!json2.hasOwnProperty(key)) {
                        continue;
                    }
                    if ('selected' == key) {
                        continue;
                    } 
                    var option = $('<option />').val(key).append(json2[key]);
                    $('select', this).append(option);    
                }                    
                /* Loop option again to set selected. IE needed this... */ 
                $('select', this).children().each(function() {
                    if ($(this).val() == json2['selected'] || 
                        $(this).text() == $.trim(original.revert)) {
                            $(this).attr('selected', 'selected');
                    }
                });


            }
        }

Is it possible to add headings to a jEditable select drop down

2 Answers2