Select2 + X-editable

On click another DOM element, display x-editable with select2.

by milz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.js"></script>
<div class="row edit-line">
    <div class="col-md-3 col-xs-1">
        <strong>Country</strong>
    </div>
    <div class="col-md-6 col-xs-4 text-right">
        <a href="#" id="country" data-type="select2" data-pk="1" data-value="ru" data-url="/post" data-title="Select country"></a>
    </div>
</div>
<div class="row edit-line">
    <div class="col-md-3 text-muted">
        <a href="#" class="edit-country text-muted text-no-underline small"><i class="fa fa-pencil"></i> toggle</a>
    </div>
</div>

JavaScript

$(document).ready(function() {
    // in case you don't want the modal
    $.fn.editable.defaults.mode = 'inline';
    // bind x-editable on DOM ready
    $('#country').editable({
        source: [
            {id: 'gb', text: 'Great Britain'},
            {id: 'us', text: 'United States'},
            {id: 'ru', text: 'Russia'}
        ],
        // change this from 'show' to 'manual'
        toggle: 'manual',
        select2: {
            width: 200,
            placeholder: 'Select country',
            allowClear: true
        }
    });
    
    // on element click
    $('.edit-country').click(function(e){
        e.stopPropagation();
        // toggle x-editable
        $('#country').editable('toggle');
    });
});