JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vitalets.github.com/x-editable/assets/poshytip/jquery.poshytip.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/poshytip/tip-yellowsimple/tip-yellowsimple.css">
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/x-editable/jquery-editable/js/jquery-editable-poshytip.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/jquery-editable/css/jquery-editable.css">
<p>Plain jQuery + poshytip</p>

<div style="margin: 10px">
  <a href="#" id="status" data-type="select" data-pk="1" data-title="Select status"></a>
</div>

JavaScript

$(function() {

  $("#status").editable({
    type: "select",
    title: 'Select Fruit',
    source: [{
      text: "Apple",
      value: "option_1"
    }, {
      text: "Orange",
      value: "option_2"
    }, {
      text: "Mango",
      value: "option_3"
    }, {
      text: "Strawberry",
      value: "option_4"
    }],
    display: function(value, sourceData) {

      if (value) { // value = "option_3" etc.
        $(this).html(value);
      }

      /* OR

      var selected = $.fn.editableutils.itemsByValue(value, sourceData);
      if (selected.length) {
        $(this).html(selected[0].value);
      } */
    }
  });
});