Select2:如何防止标签排序
Select2: How to prevent tags sorting
当用户选择多个项目(标签)时,它们会自动按字母顺序排序。 Select2 4.0 如何防止自动排序并保留用户的顺序?
更新:
提到的 "possible dublicate question" 是针对旧版本的 Select2 v3...我问的是版本 4...它与旧版本不同,提到的答案并不能解决问题。
这个has been discussed before为Select2 3.5.2,可以用select2('data')
获取顺序
$("select").select2();
$('#sayResult').click(function () {
// 'data' brings the unordered list, while val does not
var data = $('select').select2('data');
// Push each item into an array
var finalResult = data.map(function () {
return this.id;
});
// Display the result with a comma
alert( finalResult.join(',') );
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
<button id='sayResult'>Say Result</button>
我找到了适用于 Select2 v4 的解决方案。它改变了项目的顺序 - 用户选择的项目被移到最后。
$("select").select2();
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
更新
在此处找到解决方案:github.com/select2/select2/issues/3106。它的作者是kevin-brown.
这个解决方案效果最好
HTML
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
JS
$(document).ready( function () {
$("select").select2({
tags: true
});
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
} );
当用户选择多个项目(标签)时,它们会自动按字母顺序排序。 Select2 4.0 如何防止自动排序并保留用户的顺序?
更新:
提到的 "possible dublicate question" 是针对旧版本的 Select2 v3...我问的是版本 4...它与旧版本不同,提到的答案并不能解决问题。
这个has been discussed before为Select2 3.5.2,可以用select2('data')
获取顺序
$("select").select2();
$('#sayResult').click(function () {
// 'data' brings the unordered list, while val does not
var data = $('select').select2('data');
// Push each item into an array
var finalResult = data.map(function () {
return this.id;
});
// Display the result with a comma
alert( finalResult.join(',') );
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
<button id='sayResult'>Say Result</button>
我找到了适用于 Select2 v4 的解决方案。它改变了项目的顺序 - 用户选择的项目被移到最后。
$("select").select2();
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
更新
在此处找到解决方案:github.com/select2/select2/issues/3106。它的作者是kevin-brown.
这个解决方案效果最好
HTML
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
JS
$(document).ready( function () {
$("select").select2({
tags: true
});
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
} );