标签: jquery-select2-4
Select2 4.x 中的自定义用户选项输入？
有一种方法可以在 Select2 中添加自定义用户输入，而无需使用该tags模式。
也就是说，创建一个保留选择样式的自定义选择输入，而不使用内联块小标签。
另外，我发现了很多使用 AJAX 和其他主题外的答案，但没有一个能解决我的问题。
推荐指数
解决办法
查看次数
Select2：修剪输入的文本，如果为空 - 防止发送 Ajax 请求
我正在使用 Select2 和 Ajax 来加载远程数据（建议）。
一切正常，但有一个问题：当用户只输入空格（按空格键）时 - 正在发送 Ajax 请求。
我怎样才能防止这种情况？另外，我想在发送之前修剪条款。
$(".js-data-example-ajax").select2({
placeholder: "Select... ",
minimumInputLength: 3,
ajax: {
url: "/my-site/tags",
dataType: 'json',
data: function (params) {
return {
q: params.term
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
}
编辑：
我忘了提到我已经尝试过这样的事情：
data: function (params) {
if (params.term.trim().length < 2) {
return;
}
return {
q: $.trim(params.term)
};
},
并且仍然发送 GET (Ajax) 请求。
推荐指数
解决办法
查看次数
select2 - 制作所选选项文本的数组，其中键是选项值
使用最新的 select2 和多个选项。当用户选择任何选项时，我需要创建所选选项值和文本的数组。为了获得价值，我使用：
var id=$('#select2_dropdown').val();
它使数组像id[]="value1", id[]="value2"，等等。
现在我需要为标签之间的文本创建相同的数组<option>。在使用 jQuery 从下拉列表（选择框）获取选定文本中找到了解决方案，因此添加了以下代码：
var name=$("#select2_dropdown option:selected").text();
虽然它非常适合单选，但尝试将它与多选一起使用只会产生一个类似的字符串name=optiontext1optiontext2（所有选定选项的字符串合并为一个）
我怎样才能让它看起来像这样：name[value1]=optiontext1, name[value2]=optiontext2？
尝试过这个但没有任何运气：
var id=$("#select2_dropdown option:selected").text();
var name[id]=$("#select2_dropdown option:selected").text();
推荐指数
解决办法
查看次数
如何按特定字符对 select2 结果进行排序？
我想按第一个字符对选项进行排序。例如，如果我搜索“banana”，那么所有 4 个选项都将使用 select2 进行搜索，但我首先要搜索“Sbanana1”。
那么是否有任何选项可以按“S”（特定）字符对 select2 结果进行排序，因此从 's' 选项开始将首先显示。
<button type=button>Sort Options</button>
<select class='whatever'>
<option value='Banana'>Banana1</option>
<option value='Hello'>Banana2</option>
<option value='Sugar Cane'>SBanana1</option>
<option value='Palm Oil'>SBanana2</option>
</select>
推荐指数
解决办法
查看次数
Select2.js - 搜索输入只允许数字
我现在为此苦苦挣扎了一天，可能真的很容易解决。
我想要的是只接受数字的搜索字段，所以我尝试了这样的事情：
function onlyNumbers(){
$('.select2-search__field').on('keypress', function () {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
}
function select2(){
$(".select2From").select2({
tags: true,
placeholder: "de",
allowClear: true
});
$(".select2To").select2({
tags: true,
placeholder: "até",
allowClear: true
});
}
但这不起作用……实际上我什至无法访问'.select2-search__field'. 是否在按键、更改、点击、某些东西上都无关紧要......我只想知道如何获得该输入，以便我可以过滤输入中的文本。
希望您能够帮助我。谢谢！
推荐指数
解决办法
查看次数
Select2 Ajax调用失败,未使用ReferenceError:未定义require
Select2现在是否有require.js的先决条件要求,或者来自cdnjs.cloudfare.com的4.0.0-rc.2版本.我在第4582行的select2.js中遇到错误 -
未捕获的ReferenceError:未定义require.
我的代码相当简单:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Test Select2</title>
<link href="/css/normalize.css" rel="stylesheet">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css">
</head>
<body>
<!-- Main content -->
<section class="content">
<form method="POST" action="http://test.local/test" accept-charset="UTF-8" role="form">
<div class="form-group minimal">
<span class="col-xs-3 control-label minimal"><label for="Test">Test:</label></span>
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<input type="hidden"
id="test_select2"
class="input-xlarge form-control minimal select2"
data-placeholder="Search ACME"
data-minimumInputLength=3
data-width="copy"
data-containterCssClass="form-control minimal"
data-dropdownCssClass="alert-danger"
data-allowClear="true"
data-delay=250>
</div>
</div>
</section>
<!-- scripts -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery/2.1.3.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> …推荐指数
解决办法
查看次数
在同一页面/网站上选择2个多个版本
下午,
在一个网站上,我已经更新了许多使用select2 v.3.5.2到新版本4.0的元素(其中一些元素位于所有页面上的网站标题上)
不幸的是,在网站的某些页面上使用了X-editable jquery插件,并且该插件与select2的v 4.0不兼容(请阅读:根本不播放)
我的问题是: 我可以在某些页面上使用两个版本的select2吗？
如果是这样,怎么样？既然$(...).select2();盲目加载了哪个版本的select2 ....
示例代码:
$("#search_species").select2({
minimumInputLength: 1,
maximumSelectionSize: 1,
ajax: {
url: "/php/search.php",
dataType: 'json',
delay: 250,
data: function (params) {
return {
query: params.term
};
},
processResults: function (data, params) {
return { results: data };
},
cache: true
},
escapeMarkup: function (markup) { return markup; },k
templateResult: formatarResultados,
templateSelection: formatarSeleccao,
}).on("select2:selecting", function(e) {
console.log(e);
// window.location.href = e.params.args.data.url;
// $('.select2-drop').hide();
});
javascript jquery jquery-select2 jquery-select2-4 jquery-select2-3
推荐指数
解决办法
查看次数
打开时更改选择2版本4边框颜色
我试图在打开时更改选择2版本4的边框颜色:
.select2-dropdown--above {
border: 1px solid blue !important;;
border-bottom: none !important;
}
.select2-dropdown--below{
border: 1px solid blue !important;;
border-top: none !important;
}
代码:http://jsfiddle.net/7c0Lm033/
这是我得到的:
如你所见,我无法改变选择2头颜色的颜色.我找不到任何可以改变标记颜色边框的独特选择器.
推荐指数
解决办法
查看次数
如何在Select2中closeOnSelect为false时设置maximumSelectionLength？
我有以下代码:
$("#select2").select2({ closeOnSelect: false,
maximumSelectionLength: 5,
... // I have AJAX implemented here
});
当我closeOnSelect要false和有maximumSelectionLength集,我可以没有任何问题,选择超过5个项目.当我点击下拉列表同时选择了超过5个项目并尝试添加另一个项目时,我收到消息"您只能选择5个项目".
是否有任何变通方法让这两个属性一起工作而不会发生冲突？
我目前正在使用Select2 4.0.1.
更新:
我接受了pratikwebdev的建议,并添加了以下代码:
$("#select2").select2({ closeOnSelect: false,
maximumSelectionLength: 5,
... // I have AJAX implemented here
}).on("change", function(e) {
if(e.target.length == 5) {
$("#select2").select2({closeOnSelect: true,
maximumSelectionLength: 5,
});
}
});
这实际上将在我选择5个项目后关闭下拉列表,并且该maximumSelectionLength属性将正常工作.但现在closeOnSelect确实如此,所以每当我选择一些东西时,下拉菜单就会关闭.
有没有办法切换closeOnSelect？
推荐指数
解决办法
查看次数
如何使Select2 4.0可排序？
我在新版本4.0中遇到了这个问题，但直到我自己经过数小时的工作后解决后，才找到任何答案。
推荐指数
解决办法
查看次数
Select2:如何添加链接而不是"找不到结果"文本？
以下是我的代码:
$('#cow_id_2').select2({
allowClear: true,
placeholder: "Search a cow/dam ID",
formatNoMatches: function (term) {
return "<a href=/'http://google.com/'>Add</a>";
}
});
当我尝试添加链接时,插件就会停止工作.我使用的是Select2 4.0.3版本
推荐指数
解决办法
查看次数
有没有办法使用 select2 为下拉列表中的每个选项添加描述？
我有一个 Django 项目，其中有一个像这样的选择下拉列表：
但我想要这样的东西：
我的<select>表单看起来像这样：（在开发人员工具中检查后）
<select class="form-control" data-parsley-required="true" id="id_org_role" name="org_role" required="">
<option value="A">Administrator</option>
<option value="M" selected="selected">Member</option>
</select>
如果不是 select2，是否还有其他 jquery 库可以帮助我完成此操作？
我曾尝试选择二的文档以下，并认为，如果 这种方式（对于模板），我们可以跨越该选项的文本旁边的图像，那么，必须有跨越“文字说明”太下，每个选项的方式。但我不知道这是如何实现的。直到现在我一直试图做的是：
var org_role = function(roles){
if (!roles.id) {
return roles.text;
}
return $(
'<strong>' + roles.text + '</strong>' + '<br/>'
'<span>' + "some description" + '</span>'
);
};
$("#id_org_role").select2({
templateResult: org_role,
});
但这是行不通的。此外，即使是这样，它也会为所有选项显示相同的描述。但它必须明显不同。
我在模板中的 Django 表单如下所示：
<form method="POST" action="" class="org-member-edit" id='organization_permissions' data-parsley-validate>
{% csrf_token %}
<div class="form-group member-role{% if org_role_form.org_role.errors %} has-error{% endif %}">
<label …推荐指数
解决办法
查看次数
Select2 搜索 world_countries
我将https://github.com/stefangabos/world_countries cdn list 与 select2 连接以列出所有国家/地区。有人知道如何在国家/地区内搜索吗？
var countriesList = 'https://cdn.jsdelivr.net/npm/world_countries_lists@latest/data/en/countries.json';
$('select').select2({
ajax: {
url: countriesList,
dataType: 'json',
delay: 250,
data: function (params) {
console.log(params.term);
return {
q: params.term
};
},
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
id: item.id,
text: item.name
};
})
};
}
},
width: 300,
dropdownAutoWidth: true
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<select></select>推荐指数
解决办法
查看次数