有 jQuery jEditable 多选插件吗？答案

【问题标题】：Is there a jQuery jEditable Multi-select plugin?有 jQuery jEditable 多选插件吗？
【发布时间】：2010-12-08 12:56:03
【问题描述】：

我正在使用出色的 jEditable 插件在我的页面上进行一些就地编辑。有一个地方我需要一个多选元素。是否有一个 jEditable 插件可以让我这样做？

我一直在尝试使用jEditable 作者的插件 API 来创建我自己的多选插件，但到目前为止还没有骰子。关于每个函数在 API 中的作用似乎没有足够的文档。他提供的每个示例插件似乎都依赖于其他 jQuery 插件。我只需要一个基本的多选元素...

【问题讨论】：

标签： jquery select plugins jeditable multi-select

【解决方案1】：

我也一直在寻找相同的东西。试图实现这一点，但似乎没有任何效果。

顺便说一句，我发现了这个，但这似乎也不起作用 - http://pastebin.com/cbDndv5h

【讨论】：

您的 pastebin 示例只需要稍加改进即可。我在我的答案中更新了它，它对我来说效果很好。

【解决方案2】：

jeditable 插件可以做到这一点。示例：

$('.editable').editable('http://www.example.com/save.php', { 
 data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
 type   : 'select',
 submit : 'OK'
});

【讨论】：

不，这不是多选，它只允许选择一项。

【解决方案3】：

我对 Kalyan 的建议做了一个小补丁，导致它在没有可选的“selected”选项的情况下无法工作，并且未对 size 属性进行硬编码。然后我将它修改为一个 jEditable 插件，而不是你必须粘贴到 jEditable 本身的东西。我目前在一个客户网站上使用它，虽然我使用它专门由一个 json 字符串填充，所以其他方法可能仍然有问题。

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

【讨论】：

好吧，它显示了一个允许选择多个选项的选择，但我无法让它在单元格中显示选定的选项。如果我的 sUpdateURL 函数返回有效值或如果它不是有效值则崩溃，这只是一种选择:(