JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/select2/select2.css">
<script src="http://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<div style="margin:200px">
    <p>Without select2</p>
    <a href="#" id="source"  data-type="select" data-value="0"></a>
        <br><br><br><br><br>
    <p>With select2</p>
    <a href="#" id="source2"  data-type="select2" data-value="0"></a>
</div>

JavaScript

$('#source').editable({
    source: [
        {
            text: "Custom",
            children: [
                {value: 0, text: "OPEN VALUE"}
            ]
        },
        {
            text: "Calculated",
            children: [
                {value: 1, text: "$total_salary"}
            ]
        },
        {
            text: "Fields",
            children: [
                {value: 2, text: "salary_value"},
                {value: 3, text: "salary_other_value"},
                {value: 4, text: "gender"},
                {value: 5, text: "title"},
                {value: 6, text: "stuff"},
                {value: 7, text: "data"}
            ]
        }
    ]
});
$('#source2').editable({
    source: [
        {
            text: "Custom",
            children: [
                {value: 0, text: "OPEN VALUE"}
            ]
        },
        {
            text: "Calculated",
            children: [
                {value: 1, text: "$total_salary"}
            ]
        },
        {
            text: "Fields",
            children: [
                {value: 2, text: "salary_value"},
                {value: 3, text: "salary_other_value"},
                {value: 4, text: "gender"},
                {value: 5, text: "title"},
                {value: 6, text: "stuff"},
                {value: 7, text: "data"}
            ]
        }
    ],
    select2: {
        id: function(o) {return o.value}
    }
});