jEditable：提交后显示选项文本（而不是值）答案

【问题标题】：jEditable: Display Option Text (and not Value) after submitjEditable：提交后显示选项文本（而不是值）
【发布时间】：2011-09-27 12:54:33
【问题描述】：

我在选择列表上使用 jEditable。它工作得很好，除了以下问题。 jEditable 显示在提交后服务器发回的任何内容。这对于文本框等非常有用，您可以在其中简单地将提交的值从服务器发回。

但是，这对选择列表没有意义，因为发布的值只是选项元素的 Id。如果我将其发回，那么我的文本将更改为 Id，而不是之前的友好文本。

如何关闭此行为？我不想再次使用从数据库中提交的 Id 获取文本值，只是为了将其发回以供显示。应该有一种方法可以保留选项文本，然后在提交后让 jEditable 将其放回标签中。帮忙？

【问题讨论】：

标签： select jeditable roundtrip

【解决方案1】：

只需在可编辑的配置对象中添加一个回调即可：

callback: function (value, settings) { 
      $(this).html(settings.data[value]);
 }

【讨论】：

【解决方案2】：

return $(this).find('option:selected').text();

在回调函数中为我工作:)

【讨论】：

【解决方案3】：

我遇到了类似的问题。我正在使用 post 来运行和加载 URL。

通过将var str = settings.target.apply(self, [input.val(), settings]); 修改为var str = settings.target.apply(self, [input.val(), settings, input]);，我可以控制目标函数中的选择元素

【讨论】：

【解决方案4】：

Hammers 代码中的回调函数是正确的，但是我在解析数据时遇到了问题：

"JSON.parse: expected property name or '}' "

数据应该是json-conform，意思是：数据：'{"E":"Letter E","F":"Letter F","G":"Letter G"}',

所以正确的代码是这样的

$(".editable").editable("yoursave.php", { 
    type   : 'select',
    data : '{"E":"Letter E","F":"Letter F","G":"Letter G"}',
    callback: function(value, settings) {
        $(this).html(jQuery.parseJSON(settings.data)[value]);
    }
});

如果你有一个简单的数组而不是关联数组，你可以使用 Niu 的回调。

【讨论】：

【解决方案5】：

差不多了。 William Niu 的代码有两个问题。首先，您不能以这种方式访问可变数据，请改用 settings.data。其次，变量data不是数组，而是字符串，所以data[value]是行不通的。这是我的代码，试试这个。

$(".editable").editable("yoursave.php", { 
    type   : 'select',
    data   : '{'E':'Letter E','F':'Letter F','G':'Letter G'}',
    callback: function(value, settings) {
        $(this).html(jQuery.parseJSON(settings.data)[value]);
    }
});

【讨论】：

这不是有效的 JSON，浏览器中的 JSON 或 jQuery 的 parseJSON 都无法对此做任何事情。

【解决方案6】：

jEditable 提供各种回调函数供您操作数据。这可能取决于您如何获取数据以填充select。例如，如果你的数据是一个常量映射，你可以很容易地从返回的键中找到值：

var data = {'E':'Letter E','F':'Letter F','G':'Letter G'};

$('#editable').editable('some url', {
    type: 'select',
    data: data,
    callback: function(value, settings) {
        $(this).html(data[value]);
    },
    submit: 'ok'
});

示例：http://jsfiddle.net/william/mT4XV/

【讨论】：