javascript - 将 Select2 和 X-Editable 与最新版本一起使用

Question

我看到的所有显示如何将 X-Editable 与 Select2 库一起使用的在线示例都使用旧版本的 select2。

X-可编辑 - http://vitalets.github.io/x-editable/与
选择2 - https://select2.github.io/几个星期以来运气不佳。

有没有人最近获得了这两个库以及过去一年发布的版本，甚至可以一起工作？

Answer 1

我最近也遇到了这个问题，想出了一个秘籍。它使用标准的“select”并将其转换为 select2 显示:

$('#stages').editable({
  source: [ {value: 1, text:'ahaa'}, {value: 2, text: 'ohooo'} ]
}).on('shown', function(e, editable){
  editable.input.$input.select2({
    width: 250,
    minimumResultsForSearch: Infinity
  });
  editable.input.$input.select2('val', editable.input.$input.val());
});

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
		<link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<a href="#"
   id="stages"
   data-type="select"
   data-placement="right"
   class="editable editable-click"
   data-value="1"
   data-title="Select something"></a>