jquery - 是否可以将标题添加到 jEditable 选择下拉列表

Question

是否可以添加headings到jEditable选择下拉列表？

我想在一次选择中向数据集添加标题。

这相当于OPTGROUP在一个HTML选择中。

如果这可能？

如果有怎么办？

如果没有，我会开始扩展以允许这样做的任何想法？

Answer 1

如果您以纯下载形式使用 jEditable，则无法在选择中实现选项分组。另一方面，jEditable 并不是一个复杂的 java 文件，您可能想尝试添加一个选项来插入 OPTGROUP 标签：

也许看起来像：

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

这是构建选择的 jEditable 部分：

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

但是您还必须检查 jEditable 如何获取所选项目，并且可能还要调整该代码。听起来很有趣，但目前我没有时间尝试并发布工作代码。

祝你好运。

Answer 2

根据 Rafael 的回答，我今晚尝试创建它并让它为我的目的工作。请注意我没有让这个灵活，我只是为了我的目的而破解它（2 OPTGROUP，总是相同的标题）。此外，我实际上并不知道如何在 JS 中编程（如您所见），所以这只是作为一个可行的解决方案发布，当然不是最佳实践。

很高兴人们也指出我的代码中的错误 - 只是在这里发布，以防其他人遇到同样的问题。

下面对 jeditable 的更新 - 对此的调用如 Rafael 的帖子中所述（类型为“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');
                    }
                });


            }
        }