Question

I’m using the excellent jEditable plugin for some in-place editing on my page. There is one spot I need a multiple select element. Is there a jEditable plugin that allows me to do this?

I’ve been trying to use the jEditable author’s plugin API to create my own multiselect plugin, but no dice so far. There just doesn’t seem to be quite enough documentation on what each function does in the API. And every single example plugin he provides appears to rely on other jQuery plugins. I just need a basic multiple select element…

Answer 1

I made a small patch to Kalyan’s suggestion that caused it not to work without the optional “selected” option, and unhardcoded the size attribute. Then I modified it to be a jEditable plugin rather than something you have to paste into jEditable itself. I’m currently using this on a customer website, though I use it exclusively populated by a json string so other methods may still be buggy.

$.editable.addInputType("multiselect", {
    element: function (settings, original) {
        var select = $('<select multiple="multiple" />');

        if (settings.width != 'none') { select.width(settings.width); }
        if (settings.size) { select.attr('size', settings.size); }

        $(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);
        }

        if ($(this).val() == json['selected'] ||
                            $(this).html() == $.trim(original.revert)) {
            $(this).attr('selected', 'selected');
        }

        /* Loop option again to set selected. IE needed this... */
        $('select', this).children().each(function () {
            if (json.selected) {
                var option = $(this);
                $.each(json.selected, function (index, value) {
                    if (option.val() == value) {
                        option.attr('selected', 'selected');
                    }
                });
            } else {
                if (original.revert.indexOf($(this).html()) != -1)
                    $(this).attr('selected', 'selected');
            }
        });
    }
});