使用x-editable切換select2

Question

我通過單擊另一個（鉛筆圖標）DOM對象來切換可編輯狀態。 這對於簡單的text值很好用，現在我需要一個select框，最好是select2下拉列表。

在所有其他字段和常規選擇下拉菜單中，我使用以下命令：

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

對於select 2下拉菜單，我需要將附加參數傳遞給edit，但是我不知道該怎么做，下面的代碼不起作用。 （該元素未觸發）

$('.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

您應該將可編輯內容綁定到click事件之外的輸入。 用戶單擊時，便可以切換可編輯內容。

基於以下問題： X-可編輯輸入，單擊其他元素時可編輯 ，您的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');
    });
});

這是一個工作的jsfiddle 。