jEditable & Chosen combined

Question

I am using the jQuery plugins jEditable & Chosen to create an inline edit with the following script:

$('.inline_edit_menu').editable('ajax.php', { // http://polyetilen.lt/en/jquery-jeditable-and-chosen-hybrid
    data: "{'5':'Complete - No further action','4':'Unsatisfied - additional steps required','3':'Unsatisfactory - Re-Evaluate','2':'Test','1':'Pending','0':'Not Applicable'}",    
    indicator: 'Saving...',
    tooltip: 'Click to edit...',
    style: "inherit",
    onblur: "ignore",
    type   : 'select',
    submit : 'OK',
    submitdata: function (value, settings) {
        //do stuff
    }
}).on('click', function(){
            $(this).find('select').chosen();
}).on('click', function(){
    $('select').trigger('chosen:open');  
});

This works fantastic, as seen in this fiddle, with one caveat: on selecting a menu item, it doesn't submit it. I want the click event to submit the value selected, without having to click "OK". - https://jsfiddle.net/t24ph41t/2/

This would be easily solved by changing jEditable's onblur property to select . However, the problem with the current script is the initial click event automatically opens & closes the Chosen menu, as seen in this fiddle: - https://jsfiddle.net/t24ph41t/3/

I'm looking for a combination of both: how can I select an inline element using the chosen plugin, edit it and on choosing, submit the value as if this was simply a jEditable element?

Answer 1

I was able to get this functionality by adding the following script:

$(document).on('change', '.inline_edit_menu select', function () {
    $(this).trigger("submit");
});