X-Editable JQuery Plugin - Select Get Source Object

Question

I am having issues trying to get the selected object rather than the "newValue" that is passed to the success callback.

Here is an example:

$("select").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"}
        ],
        success:function(response,newValue){
            console.log(newValue); // newValue contains the "text" string ok..
            // How do I get the selected source object? eg. {text : "Orange", value: "option_2"}
            // So I can access the object like..
            console.log(newValue.value); // output option_*
        }
    });

Thanks Carl

Answer 1

You can use the display callback to access value, or even the entire selected object:

<a href="#" id="status" data-type="select" data-pk="1" data-title="Select status"></a>    
<script>
  $(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 if you want to access the selected source object  ...

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

Demo: http://jsfiddle.net/6vzrug72/