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);
});
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/