Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="http://www.cc.puv.fi/~e1400477/bootstrap-table-editable.js"></script>
<script src="http://www.cc.puv.fi/~e1400477/bootstrap-editable.js"></script>
<link rel="stylesheet" href="http://www.cc.puv.fi/~e1400477/bootstrap-editable.css">
<table id="table-hover" data-toggle="table" data-show-toggle="true" data-show-columns="true" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
    <thead>
        <tr>
            <!-- this field doesn't show select input -->
            <th data-field="name" data-editable="true" data-type="select">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="description">Description</th>
        </tr>
    </thead>
</table>
<!-- works! -->
<a href="#" id="fruits" data-type="select">banana</a>

JavaScript

$(function () {
    var $table = $('#table-hover');
    $table.bootstrapTable({}).on('editable-init.bs.table', function (e) {
        $('.editable').editable('option', {
            type: 'select',
            title: "Fruit",
            source: [{
                value: 1,
                text: 'banana'
            }, {
                value: 2,
                text: 'peach'
            }]
        });
    });
    $('#fruits').editable({
        type: 'select',
        title: "Fruit",
        source: [{
            value: 1,
            text: 'banana'
        }, {
            value: 2,
            text: 'peach'
        }]
    });
});