可编辑的动态选择选项

时间:2016-08-11 13:57:35

标签: javascript jquery html web jeditable

我有一个使用jEditable的页面,我想动态加载选项列表的选项(取决于当前元素)。

我在小提琴中有以下例子: http://jsfiddle.net/mbv401920150/2rdco6qL/1/

$(document).ready(function() {
     $('.edit').editable(function(value, settings) { 
       console.log(this);
       console.log(value);
       console.log(settings);
       return(value);
     }, { 
       data : " {'E':'E','F':'F','G':'G', 'selected':'F'}", // <---- I WANT TO CHANGE THIS CODE
       // ******************************************
       // DYNAMIC LOAD - DEPENDING OF THE ELEMENT ID
       // ******************************************
       // data :  function(currentElement) { 
       //           if(currentElement.id == "A") return " { '1':'1', '2':'2', '3':'3' }"; 
       //     else return " { 'A':'A', 'B':'B', 'C':'C' }"; 
       // }
       type : 'select',
       onblur: 'submit'
     });                                
 });

我想根据元素检索特定选项的列表。 这可能吗?

1 个答案:

答案 0 :(得分:0)

我想出了如何完成这项任务,我为每个元素添加了一个额外的类。

这是一个完整的解决方案: http://jsfiddle.net/mbv401920150/2rdco6qL/3/

$(document).ready(function() {
  $('.letter, .number').each(function(i, e) {
    $(e).editable(function(value, settings) {
      console.log(this);
      console.log(value);
      console.log(settings);
      return (value);
    }, {
      data: ($(e).hasClass('letter') ?
        " { 'A':'A', 'B':'B', 'C':'C' }" :
        " { '1':'1', '2':'2', '3':'3' }"),
      type: 'select',
      onblur: 'submit'
    });
  });
});

如果是动态生成(鼠标悬停,点击时);我在初始化jEditable后删除了辅助类。

相关问题