bootstrap 可编辑元素更改后如何更改数据值？

Question

我正在使用 bootstrap 可编辑插件来允许用户在屏幕上编辑字段。单击其中一个字段时，会显示一个小弹出窗口，允许用户从下拉列表中选择 select，下拉列表旁边有一个复选标记，以允许用户将值应用到该字段。我的标记有一个简单的锚点，如下所示：

<a href="#" id="primaryoption_1" data-type="select" data-name="option" data-value="0" class="editable-discreet">Split EM/SEM</a>

我的 jQuery 代码使用 bootstrap 启用此功能：

 var gaPrimaryOptions = [
    { value: 0, text: 'Split EM/SEM' },
    { value: 1, text: 'Only EM' },
    { value: 2, text: 'Only SEM' }
    ];

$("a[id^=primaryoption_][id!='primaryoption_{departmentid}']").editable({
        source: gaPrimaryOptions,
        onblur: 'submit'
    });

如果您注意到我的标记有一个默认值为“0”的数据值属性。

我遇到的问题是，当用户 select 从下拉列表中选择另一个项目并单击复选标记时，如何将数据值更改为适当的值。我的数据值始终保持为“0”，即使用户 select 的另一个项目如 "Only EM" 的值为“1”。

Answer 1

您如何使用浏览器中的开发工具检查该值？如果是这样，我认为您不会看到值按您希望的那样变化。

提问的原因是因为代码看起来不错，试试这个：

var gaPrimaryOptions = [
    { value: 0, text: 'Split EM/SEM' },
    { value: 1, text: 'Only EM' },
    { value: 2, text: 'Only SEM' }
];


$("a[id^=primaryoption_][id!='primaryoption_{departmentid}']").editable({
    source: gaPrimaryOptions,
    onblur: 'submit',
    validate: function(value) {
        console.log("You've chosen " + value);
    }, success: function(response, newValue) {
        console.log("New value is " + newValue);
    }
});

current_value = $("a[id^=primaryoption_][id!='primaryoption_{departmentid}']").editable('getValue', true);
console.log("Curent value is " + current_value);

http://jsfiddle.net/3KkZd/375/

bootstrap 可编辑元素更改后如何更改数据值？

How can I change data-value in bootstrap editable element after it's changed?

jquery

twitter-bootstrap

x-editable