是否可以將標題添加到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'); 
        } 
       }); 


      } 
     } 

。