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

Question

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

我想在单个选择中将标题添加到数据集中。

这将相当于HTML select中的OPTGROUP。

如果这可能吗？

如果是这样怎么样？

如果没有，我会开始扩展到允许的任何想法？

Answer 1

如果您在纯粹的下载表单中使用jEditable，则无法在select中实现选项分组。 在另一方面，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

基于拉斐尔的回答，我今天晚上创造了这个东西，让它为我的目的而工作。请注意，我没有使这个灵活，我只是为了我的目的而破解它（2 OPTGROUP，总是相同的标题）。另外我实际上并不知道如何用JS编程（因为你会看到），所以这只是一个工作解决方案，当然不是最佳实践。

非常高兴人们指出我的代码中的错误也只是发布在这里incase其他人遇到同样的问题。

更新下面jeditable - 打电话，这是因为在拉斐尔的职位（除描述的类型是“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'); 
        } 
       }); 


      } 
     } 

。