Search code examples
javascriptjqueryx-editablebootstrap-table

Getting text instead of value on change to BoostrapTable X-editable select box


I have using BootstrapTable with the x-editable to build a table that contains a select box of contacts. When a user selects a new value, I have it alert them to what they selected. Using the editable-save.bs.table, I am able to get the value associated with selection option, but that is meaningless to users. I want to get the contact name associated with that value. How can do I do this

Fiddle: http://jsfiddle.net/cdvtkndu/

var data = [{"Contact": 3}, {"Contact": 2}];

$(function () {
    $('#table').bootstrapTable({
        columns: [{
            field: 'Contact',
            title: 'Contact',
            editable: {
                type: 'select',
                source: [
                    {value: 4, text: 'Andrew'},
                    {value: 2, text: 'John'},
                    {value: 3, text: 'Liz'}
                ]
            }
        }],
        data: data
    });
});

$('#table').on('editable-save.bs.table', function (e, field, row, old, $el) {
    var new_val = row[field];
    alert(new_val);
});

Solution

  • You could dump the source into an array, and then iterate trough it in order to find the row you're searching for:

    var data = [{"Contact": 3}, {"Contact": 2}];
    var _source = [
                        {value: 4, text: 'Andrew'},
                        {value: 2, text: 'John'},
                        {value: 3, text: 'Liz'}
                    ];
    $(function () {
        $('#table').bootstrapTable({
            columns: [{
                field: 'Contact',
                title: 'Contact',
                editable: {
                    type: 'select',
                    source: _source
                }
            }],
            data: data
        });
    });
    $('#table').on('editable-save.bs.table', function (e, field, row, old, $el) {
        var new_val = row[field];
        var arrayLength = _source.length;
        for (var i = 0; i < arrayLength; i++) {
            if (_source[i].value == new_val) {
                    alert(_source[i].text);
              break;
            }
        }    
    });
    

    Look at my correction: http://jsfiddle.net/4qq1yp1y/