标签: jquery-select2-3
Select2 Ajax方法未选择
好吧,我确定这里有一些简单的设置错误,但我不是100%它是什么.
所以我试图使用Select2 AJAX方法作为用户搜索数据库和选择结果的方式.呼叫本身会返回结果,但不允许我从列表中选择答案.它似乎也不允许您在悬停或向上/向下箭头上"选择"它.所以不用多说,这是我的代码:
的index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
<script src="select2/select2.js"></script>
<script src="select.js"></script>
</head>
<body>
<input type="text" style="width: 500px" class="select2">
</body>
</html>
select.js
jQuery(function() {
var formatSelection = function(bond) {
console.log(bond)
return bond.name
}
var formatResult = function(bond) {
return '<div class="select2-user-result">' + bond.name + '</div>'
}
var initSelection = function(elem, cb) {
console.log(elem)
return elem
}
$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: …推荐指数
解决办法
查看次数
Select2在通话时使用动态Ajax URL
我使用带有Ajax的Select2插件(v 3.5.2)来动态加载列表中的元素.
我在Select2的初始化(在ajax帮助器中设置了url属性)和ajax调用的时间之间存在问题,可能需要更改此URL.
所以我有这样的事情:
$box.select2({
containerCssClass: "form-control"
minimumInputLength: 0,
allowClear: true,
ajax: {
url: someUrl,
dataType: 'json',
quietMillis: 100,
...
}
我无法弄清楚ajax.url在启动之前如何,何时,何地更改值.
Select2的帮助说:
Select2
$.ajax默认使用jQuery的函数来执行远程调用.transport可以在ajax设置中指定替代函数,或者可以通过提供自定义query函数而不是使用ajax帮助程序来构建完全自定义的实现.
但我找不到任何关于如何做的例子.
在此先感谢您的帮助.非常感激.
推荐指数
解决办法
查看次数
Chrome正在使用其占位符自动填充我的select2输入
我目前在使用Google Chrome浏览器时遇到一个非常烦人的问题。我有一些过滤器是多选的，当我单击以在这些过滤器上键入时，chrome会建议该选择的占位符作为自动填充选项。我从未在此字段上键入过该文本，Chrome会从输入的占位符中获取该文本。
另外，似乎Google将该占位符保存为“建议”以填写表单上的数据。
我已经尝试将这些字段设置为autocomplete="off"和autocomplete="new-password，但是它没有用。
如果我禁用Chrome选项自动填充地址，电话号码等，此问题将消失。
我希望能够抑制chrome提出的建议，因为它没有任何意义，并且会使使用过滤器感到痛苦。我不确定这是否是Chrome错误，select2错误以及两者的结合。我一直在互联网上到处寻找一种解决方案，却找不到解决方案，有人知道如何解决吗？
推荐指数
解决办法
查看次数
maximumSelectionSize在Select2中不起作用
我有一个多值选择,我想使用select2库设置所选项目数量的限制.
文档说我应该maximumSelectionSize在对象初始化期间设置.不幸的是,以下代码不起作用:
$(document).ready(function () {
$("#select_demo").select2({
maximumSelectionSize: 3
});
});
我的html选择框:
<div class="form-group">
<select id="select_demo" multiple="multiple" class="form-control select2 select2-container-multi">
<optgroup label="One">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</optgroup>
<optgroup label="Two">
<option>one2</option>
<option>two2</option>
</optgroup>
<optgroup label="Three">
<option>one3</option>
<option>two3</option>
<option>three3</option>
<option>four3</option>
</optgroup>
</select>
</div>
http://jsfiddle.net/x4oqL1jr/2/
这段代码有什么问题？
jquery compatibility jquery-select2 jquery-select2-4 jquery-select2-3
推荐指数
解决办法
查看次数
Select2 4.0 - Keypress不会触发选择
我已经Select2从版本升级3.5.2到版本4.0.
我们有很多形式,打字员填写了很多字段.
在旧版本(3.5.2)中,打字员将使用以下顺序:
- 专注于元素
- 输入一个数字
- 按此
Tab键选择结果并转到下一个字段
$("select").select2();<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<style>
input {
display:block;
margin:10px 0;
}
</style>
<input type=text/>
<select>
<option value="1">1. Option A</option>
<option value="2">2. Option B</option>
<option value="3">3. Option C</option>
<option value="4">4. Option D</option>
<option value="5">5. Option E</option>
</select>
<input type=text/>在版本上4.0,打字员必须:
- 专注于元素
- 击中
Enter - 输入号码
- 再按
Enter一次 - 按Tab键模糊并移动到下一个字段
$("select").select2();<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<style>
input { …推荐指数
解决办法
查看次数
Select2应用引导程序输入-lg
如何在select2下拉列表中实现input-lg类？我不希望下拉菜单的大小与具有input-lg类的input元素的大小相同，这是到目前为止的内容
<div class="col-sm-4">
<label for="mobile" class="control-label"><span class="text-danger">*</span> Nationality</label>
<input type="text" id="nationality" name="nationality" class="form-control input-lg" />
</div>
<div class="col-sm-4 padding-minimum">
<label for="mobile" class="control-label"><span class="text-danger">*</span> Gender</label>
<select name="gender" id="gender" class="form-control select2-container input-lg step2-select" data-placeholder="Select Gender">
<option></option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
</div>
这是我的剧本
<script>
$(document).ready(function(){
$('select').select2();
});
</script>
但是似乎初始化后，下拉列表的大小与具有输入-lg类的输入字段的大小不同，尽管我在选择元素上放置了一个输入-lg类。关于如何实现这一点的任何想法？我只希望select2具有与输入字段相同的高度
我使用的是select2版本4.0.0，而CSS是版本3.5.2
twitter-bootstrap jquery-select2 jquery-select2-4 jquery-select2-3
推荐指数
解决办法
查看次数
select2,ng-model和angular
使用jquery-select2(不是 ui-select)和angular,我试图将值设置为ng-model.
我已经尝试使用$watch和ng-change,但似乎没有与选择2选择一个项目后开火.
不幸的是,我使用的是购买的模板,不能使用angular-ui.
HTML:
<input type="hidden" class="form-control select2remote input-medium"
ng-model="contact.person.id"
value="{{ contact.person.id }}"
data-display-value="{{ contact.person.name }}"
data-remote-search-url="api_post_person_search"
data-remote-load-url="api_get_person"
ng-change="updatePerson(contact, contact.person)">
ClientController:
$scope.updatePerson = function (contact, person) {
console.log('ng change');
console.log(contact);
console.log(person);
} // not firing
$scope.$watch("client", function () {
console.log($scope.client);
}, true); // not firing either
JQuery集成:
var handleSelect2RemoteSelection = function () {
if ($().select2) {
var $elements = $('input[type=hidden].select2remote');
$elements.each(function(){
var $this = $(this);
if ($this.data('remote-search-url') && $this.data('remote-load-url')) {
$this.select2({
placeholder: …angularjs jquery-select2 angularjs-ng-change jquery-select2-3
推荐指数
解决办法
查看次数
在同一页面/网站上选择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
推荐指数
解决办法
查看次数
有没有办法使用 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 …推荐指数
解决办法
查看次数