使用 x-editable 切换 select2

Question

我通过单击不同的（铅笔图标）DOM 对象来切换可编辑状态。这适用于简单的text 值，现在我需要一个select 框，最好是select2 下拉列表。

在所有其他字段和常规选择下拉列表中，我使用以下内容：

$('.edit-last_name').click(function(e){    
  e.stopPropagation();
  $('#last_name').editable('toggle');
});

对于选择 2 下拉菜单，我需要将附加参数传递给可编辑，但我不知道该怎么做，下面的代码不起作用。 （元素未触发）

$('.edit-country').click(function(e){    
    e.stopPropagation();
    $('#country').editable({
      toggle: 'show', 
      select2: {
        width: 200,
        placeholder: 'Select country',
        allowClear: true
      }
    })
});

这里是html：

<div class="row edit-line">
    <div class="col-md-3 col-xs-4">
        <strong>@lang('user.country')</strong>
    </div>
    <div class="col-md-6 col-xs-8 text-right">
        <span id="country" class="edit-field" data-type="select" data-source="{{ route('countries') }}" data-value="{{ $user->country }}" data-pk="{{ $user->id }}" data-url="{{ action('UsersController@update') }}" data-title="@lang('user.country')">{{ Countries::getOne($user->country, App::getLocale(), 'cldr'); }}</span>
    </div>
    <div class="col-md-3 text-muted hidden-xs">
        <a href="#" class="edit-country text-muted text-no-underline small"><i class="fa fa-pencil"></i> @lang('general.edit')</a>
    </div>
</div>

实际上它与select2没有什么关系，我只是不知道如何将params传递给editable。

Answer 1

您应该将可编辑绑定到单击事件之外的输入。当用户单击时，您可以切换可编辑。

基于这个问题：X - editable input editable on click on other element，您的 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');
    });
});

这是working jsfiddle。